Animation

Shorthand to set the CSS properties:

      element { animation: animation-name, animation-duration, animation-timing-function,
                       animation-delay, animation-iteration-count, animation-direction animation-fill-mode;}

This shorthand is equivalent to the following:

element {
  animation-name: animation_IDENT ;
  animation-duration: time s | time ms ;
  animation-timing-function: timing ;
  animation-delay: time s | time ms ;
  animation-iteration-count: number |infinite ;
  animation-direction: direction ;
  animation-fill-mode ;
}

A list of all CSS properties that can be animated (Mozilla).

The default animation property values, any value that is not specified in the shorthand will be set to the default, even if set separately in another css rule.

  animation-name: none;
  animation-duration: 0s ;
  animation-timing-function: ease ;
  animation-delay: 0s ;
  animation-iteration-count: 1 ;
  animation-direction: normal ;
  animation-fill-mode: none ;

Examples

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;

Try it: first we set @keyframes to define a transform for "rumble"

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

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