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

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, 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


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

Copyright © 2013-2022 Emw3.com
Some rights reserved