CSS3 Animations, @keyframes, create animations using css3

Animation
@keyframes
Properties
Direction

CSS Animations

CSS3 supports animations by using @keyframes at-rule. @keyframes rule is used to control steps of animation by defining from and to or percentage of frame in it. To call animation, animation property is used. Animation can be used on single or multiple elements with different duration, delay and timing-functions.

CSS Animation Example

Box

<style>
.box{
    animation:move 1s infinite;
}
@keyframes move{
    0%{ transform:translateX(0)}
    100%{ transform:translateX(100%)}
}
</style>

@keyframe

@keyframes rule is used to define steps of animation in declaration block, i.e {}. First define name of @keyframe rule and then define steps in declaration block.

Steps in animation can be set using from and to. To defined multiple steps, we can also use offset values starting from 0% (from) to 100%(to). Intermediate values can be 50%, 25% or so on in sequence.

@keyframes using from and to


<style>
    @keyframes move{
        from{ transform:translateX(0); }
        to{ transform:translateX(100%)}
    }
    @-webkit-keyframes move{
        from{ transform:translateX(0) }
        to{transform:translateX(100%)}
    }
</style>

@keyframes using offset in percentage


<style>
    @keyframes move{
        0%{ transform:translateX(0) }
        50%{ transform:translateX(50%)}
        100%{ transform:translateX(100%)}
    }
</style>

Animations Properties

Animation property is a shortcut of following properties. The recommended way to use animations is animation property.

CSS Animations Properties
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-timing-function	linear, ease, ease-in, ease-out, easy-in-out or cubic-bezier
animation-fill-mode:	forwards, backwards, both
animation-direction	initial or alternate
animation-play-state	running or paused

How to use animation properties


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

Animation properties shortcut


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

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%{ transform:translateX(0) }
    100%{ transform:translateX(100%)}
}
</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.