ankitweblogic logo
W e b t u t o r i a l s

CSS3 Tutorial

Types of Style Sheet

Import Style Sheet

CSS3 Border Images

CSS2 Clip Property

CSS3 Background

CSS3 Color Property

CSS3 Linear Gradient

CSS3 Radial Gradient

CSS3 text-shadow

CSS3 word-wrap

CSS3 box-shadow

CSS text-stroke

CSS3 Nested Menu

CSS3 Combinators

CSS3 Pseudo Classes

CSS3 Pseudo Element

CSS3 2D Transform

CSS3 2D Transform

CSS3 3D Transform

CSS3 Transitions

CSS3 Animation

CSS3 Animation Exercise

CSS3 Multiple Columns

After Before Shadow

CSS3 Resize Property

CSS3 Shapes

Exercise Shape

CSS Tooltip

CSS Hover Effect

CSS3 Animation

CSS3 Animation is use to animate the HTML elements. An animation changes one style to another style of HTML element as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain number of times.

Same as Above:
@keyframes example {
    0% {background-color: red;}
    100% {background-color: yellow;}

By using percent, you can add as many style changes as you like.
Example 2: Animation using percentage.


Example 3: change both the background-color and the position.


Delay an Animation

The animation-delay property specifies a delay for the start of an animation.

animation-delay: 2s;

animation-iteration-count property

The animation-iteration-count property specifies the number of times an animation should run.

animation-iteration-count: 3;
animation-iteration-count: infinite;

Run Animation in Reverse Direction or Alternate Direction

The animation-direction property is used to run an animation in reverse direction or in alternate direction.

animation-direction: reverse;
animation-direction: alternate;


The animation-timing-function property specifies the speed curve of the animation.

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}