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

Animation-Name

The animation name has to first be defined in a@keyframes statement, that name can then be called by animation:

Some examples, rumble, spinner and marquee (similar to the old HTML <MARQUEE> tag), are embedded in this page so you can try them in the sample area below.

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

@keyframes spinner{
  0%  {transform:rotate(0)}
  50% {transform:rotate(170deg)}
  100%{transform:rotate(360deg)}
}
@keyframes marquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

@keyframes marquee-alt {
0% { transform: translateX(0); }
25% { transform: translateX(100%); }
50% { transform: translateX(0%); }
75% { transform: translateX(-100%); }
100% { transform: translateX(0%); }
} @keyframes xy {
0% { transform: translate(-100%, -100%); }
100% { transform: translate(0, 0); }
}

The keyframe names are case-sensitive.
A list of all CSS properties that can be animated (Mozilla).

Animation-timing-function

ease; Increases in velocity towards the middle of the animation, slowing back down at the end.
ease-in; Starts off slowly, with the speed of the transition of the animating properting increasing until complete.
ease-out; Starts quickly, slowing down the animation continues.
ease-in-out; The animating properties slowly transitioning, speeding up, and then slowing down again
linear; Animates at an even speed.
step-start; Equal to steps(1, jump-start)
step-end; Equal to steps(1, jump-end)
steps(4); Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time.
jump-start; Denotes a left-continuous function, so that the first jump happens when the animation begins.
jump-end; Denotes a right-continuous function, so that the last jump happens when the animation ends.

Defaults

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 ;

Try it:

Change the animation: spinner 2s linear ...
to animation: rumble ... or animation: marquee ... etc

css sample

(CSS 3) Browser Support: IE 10, Firefox and Opera.

“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.
:Hover - Anchor/Link Hover Pseudo-Class - stop an animation on mouse-over.


Copyright © Emw3.com 2013-2019
Some rights reserved