MENU


keyframes

animation (shorthand)
: .5s linear 1s infinite alternate slidein
: anm 3s 4s 3 alternate

...animation-name
: none: no animation; deactivates an animation.
: kfn: uses the defined keyframe kfn

...animation-duration
: 3s: each cycle of animation lasts 3 seconds.
: 200ms, 3.1s: for multiple animations.

...animation-timing-function
: linear: same speed from start to end.
: ease: slow start and end.
: ease-in: slow start.
: ease-out: slow end.
: ease-in-out: slow start and end.
: cubic-bezier(0,0.5,0.2,0.3): custom speed function.
: cubic-bezier(0,0.5,0.2,0.3):custom speed function.
: steps(6, start): discretely; =steps(6, jump_start).
: steps(8, end): discretely; =steps(8, jump_end).
: steps(4, jump-start): first jump on animation start.
: steps(10, jump-end): last jump on animation end.
: steps(20, jump-none): jumps on neither end.
: steps(5, jump-both): jumps on both ends.
: step-start: = steps(1, jump-start).
: step-end: = steps(1, jump-end).

...animation-delay
: 4s: delays 4 seconds before starting the animation.
: -500ms: starts immediately, partway.

...animation-iteration-count
: 3.5: plays the animation 3.5 times.
: infinite: plays the animation infinitely.

...animation-direction
: normal: restarts after each cycle.
: reverse: plays the animation backwards.
: alternate: reverses on alternate cycles, smoothing the animation during a cycle change.
: alternate-reverse: 'reverse' and 'alternate'.

...animation-fill-mode
: none: the default.
: forwards: retains the last keyframe after execution.
: backwards: applies the first keyframe before execution, ie. during the delay.
: both: both 'forwards' and 'backwards'.

...animation-play-state
:paused: pauses the animation
:running: continues the animation

Combining animations with different durations in this way effectively varies the animation.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   @keyframes mv{    
      from {left:0px;}    
      25% {left:100px;}    
      50% {left:50px;}    
      75% {left:200px;} 
      to {left:300px;}
   }
   @keyframes clr{  
      from { background:yellow; top:50px;}  
      60% { background:white; top:300px;}   
      to { background:green; top:50px;}
   }
   div {
      width:100px;    
      height: 100px;    
      position: relative;    
      animation: mv 5s 3s alternate infinite,           
                 clr 2s 3s alternate infinite;
   }
</style></head><body style="height:400px">
   <div>A moving box that changes its color.</div>
</body></html>
This stylishly presents the video clip as the page loads. The 'animation' shorthand property requires a minimum of two values: 'animation-name' and 'animation-duration'.
RESETRUNFULL
<!DOCTYPE html><html><head><style>
   @keyframes kf{ 
      from {opacity: 0;
            transform:translate(-15vw,-15vh) 
                      scale(0) 
                      rotate(0deg);}   
      to { opacity:1;
           transform: translate(15vw,15vh) 
                      scale(1) 
                      rotate(3600deg);}
   }
   video {    
      transform:translate(15vw,15vh);    
      animation: kf 1s;
   }
</style></head><body>   
   <video src="videoplayback.mp4" controls></video>
</body></html>

will-change (hint for performance optimization)
: auto: let the user agent optimizes normally.
: scroll-position: animation/change of scroll position expected soon.
: contents: animation/change expected soon.