WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

CSS3 Animations


CSS3 Animations

CSS3 can create animations, which can replace many of the effects of webpage animated images, Flash animations, and JavaScript.

CSS3
Animation

Browser Support for Animations

The numbers in the table indicate the first browser version number that supports this attribute.

The number immediately before -webkit-, -ms- or -moz- is the first browser version number that supports this prefix attribute.

Property
@keyframes 43.0
4.0 - webkit-
12.0 10.0 16.0
5.0 - moz-
9.0
4.0 - webkit-
30.0
15.0 - webkit-
12.0 - o-
animation 43.0
4.0 - webkit-
12.0 10.0 16.0
5.0 - moz-
9.0
4.0 - webkit-
30.0
15.0 - webkit-
12.0 - o-

What are CSS3 Animations?

Animation is the effect of gradually changing an element from one style to another.

You can change the style as many times as you like.

Please use a percentage to specify when the change occurs, or use the keywords "from" and "to", which are equivalent to 0% and 100%.

0% is the beginning of the animation and 100% is the completion of the animation.

For best browser support, you should always define 0% and 100% selectors.


The @keyframes Rule

Using the @keyframes rule, you can create animations.

Creating an animation is a step-by-step change from one CSS style setting to another.

During the animation, you can change the settings of the CSS style multiple times.

The specified change occurs when using%, or the keywords "from" and "to", which are the same as 0% to 100%.

0% is the opening animation and 100% is when the animation is complete.

For best browser support, you should always define selectors as 0% and 100%.

Note: Use the animation property to control the appearance of the animation, and also use selectors to bind the animation.

Example

/* The animation code */
@keyframes example {
from {background-color: hotpink;}
to {background-color: darkblue;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: hotpink;
animation-name: example;
animation-duration: 4s;
}
Try it yourself »

Note: If the animation-duration property isn't indicated, the activity will have no impact, in light of the fact that the default esteem is 0. 

In the precedent above we have determined when the style will change by utilizing the catchphrases "from" and "to" (which speaks to 0% (begin) and 100% (complete)).

It is additionally conceivable to utilize percent. By utilizing percent, you can include the same number of style changes as you like.

The following precedent will change the foundation shade of the <div> component when the animation is 25% finished, half total, and again when the animation is 100% complete:

Example

/* The animation code */ @keyframes example { 0% {background-color: hotpink;}
25% {background-color: darkblue;}
50% {background-color: blue;}
100% {background-color: green;}
} /* The element to apply the animation to */ div { width: 100px;
height: 100px;
background-color: hotpink;
animation-name: example;
animation-duration: 4s;

}
Try it yourself »

The following model will change both the background-color and the situation of the <div> component when the animation is 25% finished, half total, and again when the animation is 100% complete:

Example

/* The animation code */
@keyframes model {
    0%   {background-color: hotpink; left:0px; top:0px;}
    25%  {background-color: darkblue; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: hotpink; left:0px; top:0px;}
}

/* The component to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: hotpink;
    animation-name: example;
    animation-duration: 4s;
}
Try it yourself »

Delay an Animation

The

animation-delay attribute defines when the animation starts.

Animation-delay value can be in seconds (s) or milliseconds (ms).

Tip: Allow negative values, -2s makes the animation start immediately, but skips 2 seconds to enter the animation.

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: hotpink;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
Try it yourself »

Set How Many Times an Animation Should Run

The animation-iteration-count property indicates the occasions a animation ought to run.

The following model will run the animation multiple times previously it stops:

Example

div { width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example;
/* Chrome, Safari, Opera */ -webkit-animation-duration: 4s;
/* Chrome, Safari, Opera */ -webkit-animation-iteration-count: 3;
/* Chrome, Safari, Opera */ animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Try it yourself »

The following precedent uses the esteem "infinite" to make the animation proceed for ever:

Example

div {
    animation-iteration-count: infinite;
}
Try it yourself »

Run Animation in Reverse Direction or Alternate loops

The animation-direction property is utilized to give a animation a chance to keep running backward heading or interchange loops.

The following precedent will run the activity in invert direction:

Example

div { width: 100px;
stature: 100px;
position: relative;
background-color: hotpink;
animation-name: example;
animation length: 4s;
animation-iteration-count: 3;
activity-direction: reverse;
}
Try it yourself »

The following model uses the esteem "alternate" to make the animation first kept running forward, at that point in reverse, at that point forward:

Example

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: hotpink;
    animation-name: example;
    animation span: 4s;
    animation-iteration-count: 3;
    activity heading: alternate;
}
Try it yourself »

Specify the Speed Curve of the Animation

The animation-timing-function property indicates the speed bend of the animation.

The animation timing-work property can have the accompanying values:

  • ease - determines a animation with a moderate begin, at that point quick, at that point end gradually (this is default)
  • linear - determines a animation with a similar speed from begin to end
  • ease-in - determines a animation with a moderate start
  • ease-out - determines a animation with a moderate end
  • ease-in-out - determines a animation with a moderate begin and end
  • cubic-bezier(n,n,n,n) - gives you a chance to characterize your own qualities in a cubic-bezier function

The following precedent demonstrates the a portion of the distinctive speed bends that can be used:

Example

#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;}
Try it yourself »

Animation Shorthand Property

The model underneath utilizations six of the activity properties:

Example

div {
    animation-name: example;     animation-duration: 5s;     animation-timing-function: linear;     animation-delay: 2s;     animation-iteration-count: infinite;     animation-direction: alternate;
}
Try it yourself »

The same animation impact as above can be accomplished by utilizing the shorthand animation property:

Example

div {
    animation: myfirst 5s linear 2s infinite alternate;
}
Try it yourself »