@Keyframes

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:
                      0-100%
                      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.

Examples

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) }
 }

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;

(CSS 3) Browser Support: IE 10, Edge 12 Firefox 16, Safari 9 and Chrome 43.

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

Related:

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