Table of Contents
Syntax:
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
Example:
#animation1 {
-webkit-animation: move 5s ease-out 0 infinite alternative;
-moz-animation: move 5s ease-out 0 infinite alternative;
}
Syntax:
@keyframes: keyframe-name {percentage | from | to {css rules}}
Example:
@keyframes move {
from{left: 0; top:0;}
50% {left:500px;top:0;}
to {left:500px;top:500px;}
}
How To Assign Animation Name and Duration
There is a property animation-name, which is used to define the animations that should be run. The @keyframe directive specified defines the properties to animate. The keyword none can be used to override a cascade.
Syntax:
animation-name: @keyframe-name | none [,@keyframe-name|none]
There is another property animation-duration, which is used to define the time taken in one iteration of an animation to play where time is a valid time like 4s 400ms.
Syntax:
animation-duration: time [,time]
Example:
@-webkit-keyframes move {
from{left: 0; top:0;}
50% {left:300px;top:0;}
to {left:300px;top:100px;}
}
@-webkit-keyframes resize {
from{height:300px;width:100px;}
50% {height:100px;width:100px;}
to {height:100px;width:300px;}
}
@-webkit-keyframes fade {
from{opacity:1;}
50% {opacity:0.5;}
to {opacity:0.1;}
}
@keyframes move {
from{left: 0; top:0;}
50% {left:300px;top:0;}
to {left:300px;top:100px;}
}
@keyframes resize {
from{height:300px;width:100px;}
50% {height:100px;width:100px;}
to {height:100px;width:300px;}
}
@keyframes fade {
from{opacity:1;}
50% {opacity:0.5;}
to {opacity:0.1;}
}
#animation1{
-webkit-animation-name:move, resize, fade;
-webkit-animation-duration:10s, 10s, 10s;
-webkit-animation-iteration-count:infinite;
animation-name:move, resize, fade;
animation-duration:10s, 10s, 10s;
animation-iteration-count:infinite;
position:relative;
}
Demo:
How to Set Animation Direction and Time to Start Animation
Using animation-direction property, you can define how animation plays for every iteration in reverse or repeats.
Syntax:
animation-direction: normal | alternate [,normal | alternate]
Syntax:
animation-delay: time1 [,…timeN]
Example:
#animation1{
-webkit-animation-name:move, resize, fade;
-webkit-animation-duration:10s, 10s, 10s;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 0s, 2s, 3s, 4s;
-webkit-animation-iteration-count:infinite;
animation-name:move, resize, fade;
animation-duration:10s, 10s, 10s;
animation-direction: alternate;
animation-delay: 0s, 2s, 3s, 4s;
animation-iteration-count:infinite;
position:absolute;
}
Demo:
How to Set How Animation Will Play
There is a property animation-timing-function to describe how the animation will play.
Syntax:
animation-timing-function: timing-function [,timing-function2,….timing-functionN]
cubic-bezier(number, number, number, number) | ease | ease-in | ease-in-out | ease-out | linear
Example:
#animation1{
-webkit-animation-name:move;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
animation-name:move;
animation-duration:5s;
animation-timing-function:linear;
animation-iteration-count:infinite;
position:absolute;
}
Demo:
How to Set How Number of Times Animation Should Play
You can set how number of times animation should play using animation-iteration-count property.
Syntax:
Example:
#animation1{
-webkit-animation-name:move;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:2;
animation-name:move;
animation-duration:5s;
animation-iteration-count:2;
position:relative;
}
#animation2{
-webkit-animation-name:move;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:infinite;
animation-name:move;
animation-duration:5s;
animation-iteration-count:infinite;
position:relative;}
Comments are closed.