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

Related:

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


© Copyright SS64.com 1999-2014
Some rights reserved