Animation is cool feature of CSS3. Animation is an easiest way to spice up your next project. In short, it lets you change CSS property over specific time duration. It consist of two main components, a style and a set of keyframes that indicate the start and end states of animation’s style.
In this article, i’m gonna introduce you to CSS3 animation, with syntax and example.
Setting up the animation
To create a CSS animation, style the element that you want to animate with the animation property. This will lets you configure the timing and duration of the animation, as well as other details of how the animation sequence should progress, and this can be done using @keyframes. You can declare CSS animation in two ways,
1. Calling keyframes animation with separate properties
element {
animation-name: loader;
animation-duration: 6s;
animation-timing-function: ease-out;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
2. Shorthand version of Animation
element {
animation: animation-name duration timing-function delay iteration-count direction fill-mode play-state;
}
| animation-name | Give appropriate name of the keyframe you want to bind to the selector |
| animation-duration | Specifies the length of an animation that takes to finish. Default value is 0, meaning there will be no animation. For example, 6s or 6ms |
| animation-timing-function | You can use following functions:ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2)cubic-bezier.com: A better tool for cubic-bezier() easing |
| animation-delay | Here you can specify delay before the animation will start. For example, 3s or 3ms |
| animation-iteration-count | Specifies how many times an animation should be played. For example, 10 will play animation ten time or you can use infinite keyword to play animation infinite time. |
| animation-direction | It defines whether or not the animation should play in reverse on alternate cycles.Syntaxanimation-direction: normal | reverse | alternate | alternate-reverse; |
| animation-fill-mode | Specifies what styles will apply for the element when the animation is not playing means that when animation is finished or when it has a delay.Syntaxanimation-fill-mode: forwards | backwards | both | none; |
| animation-play-state | Specifies whether the animation is running or paused.Syntaxanimation-play-state: paused | running; |
Setting up animation sequence using keyframes
After configuring the animation’s timing, you need to define the appearance of the animation. This can be done by establishing set of keyframes using the @keyframes at-rule. Each keyframe describes how the animated element should render at a given time during the animation sequence.
Method – 1: @keyframes declaration
@keyframes ANIMATION-NAME {
from {
/* Some Style */
}
to {
/* Some Other Style */
}
}
Method – 2: @keyframes declaration
@keyframes ANIMATION-NAME {
0% {
/* Some Style */
}
25% {
/* Some Style */
}
50% {
/* Some Style */
}
100% {
/* Some Style */
}
}
Implementing Steps()
Using steps(), you can controls how many keyframes will render in the animation timeframe. For example, if you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The most popular use for step easing is sprite animation. See, the demo about sprite animation with steps easing.
Multiple Animation
Multiple animations can be specified comma separated on a selector. Here is one another demo for multiple CSS animations.
