things to know about @keyframes

<h3 class="title"><code>@keyframes</code> and <code>animation</code>:</h3> <h4>The cycle:</h4> <p> if i have an element that has some styles like: <pre> <code> div{ width:20px; color:purple; background:white; } </code> </pre><p> by default when the page run they will run(or they might work on any event).these styles will keep runing until the point the browser reaches the <code>animation</code> property:</p> <pre> <code> div{ width:20px; color:purple; background:white; <strong>animation:jump 3s 2 3 ease;</strong> } </code> </pre> <p>now the <code>animation</code> property will start runing and style the element with it's value.in our case<code> jump 3s 2 3 ease</code>.at that point <code>@keyframes</code> will begin running it's frames(0%,50%,...):</p> <pre> <code> @keyframes{ 0%{ styles } 50%{ styles } 100%{ styles } </code> </pre> <p> you need to know now <strong>that</strong> the <code>animation</code> property will run at least one cycle or as specified with the <code>animation-iteration-count</code>. a cycle with time set using <code>animation-duration</code> prpoerty(for example 2s or infinite).in our case here the animation will be 3 cycles of animation.that is runing the styles in the frames 3 times each cycle of will take 3 seconds to end at a speed rate of ease.note here that once the animation has finished and no cycles are left to be run again the <code>animation </code> property will end it's job and we are back to our element's styles defined before and after the <code> animation</code> property unless we specify <code>animation-iteration-count</code> property to be <code>infinite</code>. </p> <h4>The frames:</h4> <p> the frames will run the code inside it and therefore new styls and updeted styles will be added to the element as an animation.the frames 0%,25%...are points in the time specified for the animation and this is the reason we use css animation using <code>@keyframes</code> so that we can add styles or update styles at these points as much as we wish. </p> <h4>let's start the animation duration:</h4> <ol> <li><h4>Controling the frames:</h4> <ul> <li> <code>animation-duration</code> when controlled using the frames is similar to painting a gradient line (remember the:pure red at 50%!) except that the last time-stop(color-stop in gradients) if specified to be 80% for instance in gradient was the gradient line is painted with that last color-stop value.animation is different as it will take the come-back value (the normal state value assigned to the element before running <code>aniamtion property</code>) and finish the cycle with it. </li> <li> using the concept above if the first time-stop is missing and frames start for instance with 40%.the duration from 0% all the way to 40% will take the come-back value in the normal state <p>code explains the above:</p> <pre> div{ normal state come-back values } @keyframes{ 0%{ if missing,then come-back values will be used until we get to the first frame } 50%{ animation styles } 100%{ if missing,then come-back values will be used until we get to the end of cycle } </pre> </li> <li><h4>Jumping to the first cycle of the animation:</h4><p> it all depends on the animation i have in mind,it is all about the jump from the normal state to the first keyframe and the delay time incase of any.remember not starting with 0%{} will cause the animation to start from the normal state all the way to the first defined keyframe without any jumping.smooth animation.defining two diffrent values in the normal state and the first keyframe (to{}) will cause the jump to happen.having a delay time before the animation is fine because i can use the <code>animation-fill-mode:backwards</code> value which states that the element will be animated with the first keyframe values during the delay time before the animation starts.hence when it starts it will start with the first keyframe without any evidance of jump.remember thios property works only if we have delay time.the last case is if we assign the same values to both normal state and first keyframe.the animation will start from normal state with no jump. </p></li> <li><h4>Jumping to the come-back from the last cycle:</h4><p> again remember that not defining the last keyframe 100%{} will get us back to the normal state value.in other words ending the animation with the normal state value.this means there is no jump.because the jump behaviour will take a place if the last frame value is different from the normal state value.that is when the cycle end we will jump back to the normal state so if we assign the same values for both last keyframe and normal state there will be no jumping.also if we use <code>animation-fill-mode:fowards</code> property value it will ensure that the elelment will finish it's last cycle of animation with the last keyfrmae value(this will not happen if we use <code>infinite</code>).giving us the chance to assign whatever values for the last keyfrmae and stop at it without any evidance of jump and not worrying about assigning the same values used in the normal state to the last keyframe to avoid the jump behaviour.<code>animation-direction:alternate</code> value will let us avoid that jump behaviour even when <code>infinite</code> is used. </p></li> </ul> </li> <li> I need to keep in mind that when animating element(specialy with <code>transform</code>) i need to calculate the element size,the container size and how much space is left when the element is transformed. </li> <li> i can use timing-functions inside the frames to give that frame the speed i want.so,for instance if i assign a speed of <code>ease-in</code> for the frame <code>50%</code>.that speed rate will be given for the intermediate values bettwen the 50% frame and the next frame. </li> <li>three iteration cycles means one cycle repeated three times.each time starting from the first keyframe to the last keyfrmae and then jumping to the normal state or whatever specified for the animation when it ends.infinite means one cycle being repeated forever.we could also say three cycles is one cycle being repeated only three times.</li> <li>using <code>animation-direction:</code> reverse values will reverse easing functions as well!.</li> <li>the delay is applied for the entire animation before it starts not for each cycle.to have the same effect but for each cycle.different approach is used.in the other hjand transitions use the delay time while traveling from normal state to new state and from new state to normal state.</li> <li>it's okay to use a specific <code>timing-function</code> on one of the frmaes along with the <code>timing-function</code> that is used inside the <code>animation</code> property.the timing-function used on one frame will affect only that frame duration.i can notice the difference here: <div class="navy">frame#1 styled with different <code>timing-function</code></div> <section class="red">only one <code>timing-function</code> used in <code>animation</code> property</section> </li> </ol>