Control the intermediate steps in a CSS animation sequence by establishing keyframes (or waypoints) along the animation sequence that must be reached by certain points in time during the animation.

       @keyframes AnimationName {keyframes-selector {css-styles;}}

   AnimationName      The name of the animation.

   keyframes-selector Percentage of the animation duration:
                      from (same as 0%)
                      to (same as 100%)
                      Multiple keyframes-selectors can be applied to one animation.

   css-styles 	       One or more legal CSS style properties

In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.


Define a set of partial rotation keyframes (shake):

keyframes shake {
   0% { transform: translate(7px, 2px) rotate(0deg); }
  20% { transform: translate(-8px, 0px) rotate(3deg); }
  40% { transform: translate(6px, -2px) rotate(3deg); }
  60% { transform: translate(-8px, 2px) rotate(0deg); }
  80% { transform: translate(-6px, -2px) rotate(3deg); }
  100% { transform: translate(6px, -4px) rotate(-3deg); }

Define a transform keyframe (rumble) note this has to include empty selectors for 0 and 100%:

@keyframes  rumble {
 0%, 100% {}
 50% { transform: translateY(-0.2em) }
@-webkit-keyframes rumble {
0%, 100% {} 50% { -webkit-transform: translateY(-0.2em) } } @-ms-keyframes rumble {
0%, 100% {}
50% {-ms-transform: translateY(-0.2em) } }

Now we can set the ident called "rumble" to repeat, in a linear fashion every 0.1 s, with no startup delay and repeat indefinitely:

animation: rumble linear 0.1s 0s infinite;

This is a sample of CSS animation.

(CSS 3) Browser Support: IE 10, Firefox and Opera. For older versions, use the equivalent -moz-animation for Firefox , -ms-animation for IE and -webkit-animation for Safari and Chrome.

“I've learned that our background and circumstances may have influenced who we are, but we are responsible for who we become” ~ James Rhinehart


transform - Apply a 2D or 3D transformation to an element.
transition - CSS transition effects.

© Copyright SS64.com 1999-2014
Some rights reserved