abc-notepedia

# Animation

You specify animation inside the @keyframes rule. the animation will gradually change from the current style to the new style at certain times.

you must bind the animation to an element. (with animation-name, animation-duration,...) If the animation-duration property is not specified, no animation will occur (default value is 0s).

/* The animation code */
  @keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
  }
  
  /* The element to apply the animation to */
  div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
  }

By using percent, you can add as many style changes as you like:

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
Animation
@keyframes (opens new window) Define the Animation
animation-name: (opens new window) Apply the animation to the element
animation-duration: (opens new window) defines how long time an animation should take to complete.
If the animation-duration property is not specified, no animation will occur (default value is 0s)
animation-delay: (opens new window) Specifies a delay for the start of an animation.
If using negative values, the animation will start as if it had already been playing for N seconds.
animation-iteration-count: (opens new window) Specifies the number of times an animation should run.
Use "infinite" to make the animation continue forever.
animation-direction: (opens new window) specifies whether an animation should be played forwards, backwards or in alternate cycles.
animation-timing-function: (opens new window) specifies the speed curve of the animation
animation-fill-mode: (opens new window) specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
animation-play-state: (opens new window) Lets you pause and resume the animation sequence.
animation: (opens new window) Shorthand for: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state. animation: example 5s linear 2s infinite alternate;

← CSS misc. →