CSS3 Animations

CSS3 introduced animations in a website using @keyframes. @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 timings.

Box

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

Animations Properties

Animation 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


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