CSS Animations

CSS3 animation specifies the element transitions from one style to another style. Animation can also be used on single or multiple elements with different delay,duration, and timing-functions.CSS3 uses the @keyframes rule rule, which is used to control steps of animation by defining from, and to or percentage

To understand CSS3 animation, you must have to understand the @keyframe rule.

@keyframe

Basically, the @keyframes rule is used to define animation steps that are declared in the declaration block such as {}.

@keyframes rule is used to define steps of animation in a declaration block, i.e {}. First, define the name of the @keyframe rule and then define the steps in the declaration block. First of all use @keyframes followed by the animation name. Steps in the animation can be specified by from and to keywords.

To define multiple animation steps, use offset values that is starting from 0%(from) to 100%(to). The intermediate value might be 50%, 25%, or so on in sequence.

    
   @keyframes movement{
        from{ margin-left:0px; }
        to{ margin-left:200px;}
    }
    @-webkit-keyframes movement{
        from{ margin-left:0px; }
        to{ margin-left:200px;}
    }
   

@keyframes Using Offset In Percentage

    
     @keyframes movement{
        0%{ margin-left:0px; }
        55%{ margin-left:100px;}
        100%{ margin-left:200px;}
    }
   

Animations Properties

Followings are the animation properties:

• animation-name: Indicates the name of the animation.
• animation-duration: It indicates the duration of the animation( in s or ms).
• animation-delay: It indicates a delay before playing animation in s or ms.
• animation-iteration-count: It indicates the count of animation that will be finite, and infinite.
• animation-timing-function: It indicates the following predefined functions: linear, ease, ease-in, ease-out, easy-in-out, or cubic-bezier.
• animation-direction: It indicates the followings values: initial or alternate.
• animation-play-state:It has the following values: running or paused.

Animation Short Syntax

Animation With Alternate Direction

Animation direction alternate is used to repeat animation from start to end and then end to start.