CSS3 animation overview

CSS property animation along with @keyframw definition can be used to implement animation on properties in CSS. The behaviour of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behaviour.

@keyframes

@keyframes represent two or more waypoint in the animation. @keyframes specify values of animating properties.

Formal syntax

@keyframes <identifier> {
  [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}

Here are syntax examples defining @keyframes named left-to-right-to-left.

@keyframes left-to-right-to-left {
  0% {left:0;}
  50% {left:300px;}
  100% {left:0;}
}
// or 
@keyframes left-to-right-to-left {
  0%, 100% {left:0;}
  50% {left:300px;}
}
// or
@keyframes left-to-right-to-left {
  from {left:0;}
  50% {left:300px;}
  to {left:0;}
}

Note that from and to are alias for 0% and 100%.

Animation css properties

These are various animation properties which can either directly be specified or these can be specified using shorthand property animation.

Property	Brief description
animation-name	defines a list of animations that apply
animation-duration	defines the length of time that an animation takes to complete one cycle. initial value is ‘0s’.
animation-timing-function	describes how the animation will progress over one cycle of its duration. e.g. ‘ease’ (default), ‘linear’, etc.
animation-delay	defines when the animation will start. Initial value is ‘0s’
animation-iteration-count	specifies the number of times an animation cycle is played. initial value is ‘1’. ‘infinite’ will play it forever.
animation-direction	defines whether or not the animation should play in reverse on some or all cycles. Initial value is ‘normal’.
animation-fill-mode	defines what values are applied by the animation outside the time it is executing. Initial value is ‘none’
animation-play-state	defines whether the animation is running or paused. Initial value is ‘running’.
animation (shorthand)	animation-name \|\| animation-duration \|\| timing-function \|\| animation-delay \|\| animation-iteration-count \|\| animation-direction \|\| animation-fill-mode \|\| animation-play-state (These should be in order)

Example – css basic left-to-right animation

In the following code, CSS property animation-duration can be changed to the following values

<style>
@keyframes left-to-right {
  0% {left:0;}
  60% {left:200px;}
  100% {left:300px;}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation-name: left-to-right;
  animation-duration:4s;
}
</style>

<div class=box>Object</div>

animation-duration refresh

try it online

Example – css linear infinite iterations animation

Here animation shorhand is specifying animation name, duration, timeing-function, start delay and iteration-count.

<style>
@keyframes left-to-right {
  0% {left:0;}
  60% {left:200px;}
  100% {left:300px;}
}
.box {
  position: fixed;
  background-color:lightgreen;
  animation: left-to-right 4s linear 0s infinite;
}
</style>

<div class=box>Object</div>

refresh