CSS3 Animations

CSS3 introduced animations in css by using @keyframes at-rule. keyframes is used to create animation and to call animation, animation property is used. Animation can be used on single or multiple elements with different duration, delay and timing-functions.

CSS3 Animation Example

Box

<style>
.box{
    animation:move 1s linear infinite;
}
@keyframes move{
    0%{ margin-left:0 }
    100%{ margin-left:200px}
}
</style>    

Animations Properties

Css3 Animation property is a shorcut of followng properties. The recommended way to use animations is animation property.

Animation Properties Value
animation-name name of animation
animation-duration duration of animation ( in s or ms)
animation-delay delay before playing animation ( in s or ms)
animation-iteration-count count of animations, could be any number or infinite
animation-timimg-function linear, ease, ease-in, ease-out, easy-in-out or cubic-bezier
animation-direction initial or alternate
animation-play-state running or paused


Animation with alternate direction

Animation direction alternate is used to repeat animation from start to end and then end to start. For exp, Pendulum

Box

<style>
.box1{
    animation:move 1s linear infinite alternate;
}
@keyframes move{
    0%{ margin-left:0 }
    100%{ margin-left:200px}
}
</style>    

CSS3 Pendulum


<style>
.box2{
    animation: pend 1s infinite alternate ease-in-out; 
    transform-origin: center top;
}
@keyframes pend{
    0%{ transform: rotate(-30deg)}
    100%{transform: rotate(30deg)}
}
</style>    

For Old Firefox, use -webkit-, for chrome and safari, use -webkit- and for Internet explorer IE 8 and below, use jquery animations.