Basics of CSS animation
Reading Time:
CSS animation is an alternate choice for making script driven animation. This feature can be used to make cool animations with just few lines of code that would otherwise require more effort when coded in JavaScript. There are more advantages to use CSS animation rather than using script based animation. Most of modern browsers support this feature.
CSS animation
This feature can be implemented either using the shorthand CSS animation property or the elaborated list of properties which the animation property uses. For understanding purpose here the properties are discussed separately.
Creating a CSS animation
To create an CSS animation,
1. We first configure the element to be animated using the animation-* properties like the duration, delay, name etc.
2. Then we use @keyframes to create the animation sequence i.e. the properties that should change to create the animation. keyframes use percentage to represent the time during the animation sequence. 0% indicates the initial state of the animation and 100% is the final sequence of the animation. 0% and 100% can also be written as from and to. You also include additional sequence to animate at a particular percentage.
keyframe structure
@keyframe animationName {
from {
// properties to animate
}
50% {
// properties to animate
}
to {
// properties to animate
}
}Here is the complete list of properties that can be animated.
Animation Properties
| Property | Description |
|---|---|
| animation-name | This is the name used in keyframe to apply the list of animation specified. |
| animation-duration | Time taken for the animation to complete one cycle. |
| animation-delay | Specifies the time duration to delay before starting the animation. |
| animation-iteration-count | Number of times the animation cycle should be played. infinite for playing continuously. |
| animation-timing-function | Specifies how the animation should progress over the duration of each cycle. |
| animation-direction | Whether the animation should play in reverse or alternate-cycle |
Creating a simple image slider
Image slider structure
Above image shows the structure of the image slider. The .container is the main container. .slider-container is the main slider container which has a width of 800px and it hides the elements that overflow. The images are stacked horizontally. We use the keyframe to change the image margin 800px in a particular period of time.
HTML
<div class="container">
<div class="slider-container">
<div class="slide pic-one"><img src="img/img_1.jpg"/></div>
<div class="slide pic-two"><img src="img/img_2.jpg"/></div>
<div class="slide pic-three"><img src="img/img_3.jpg"/></div>
</div>
</div>CSS
.container {
height: 600px;
width: 800px;
margin: 0 auto;
overflow: hidden;
border: 2px solid lightgray;
border-radius: 3px;
}
.slider-container {
width: 2400px;
/**
* Animation configuration
*/
animation-name: slider;
animation-duration: 12s;
animation-delay: 0s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.slider-container div {
float: left;
}
/* Animation sequence */
@keyframes slider {
/* Initial state is unchanged, show first image */
0% {
margin-left: 0px;
}
/** Stay in image one till 20% */
20% {
margin-left: 0px;
}
/* Change the margin to display the 2nd image */
40% {
margin-left: -800px;
}
/** Stay in second image till 60% */
60% {
margin-left: -800px;
}
/** Move to 3rd image */
80% {
margin-left: -1600px;
}
/* Show last image till 100% */
100% {
margin-left: -1600px;
}
}The above example shows how easy it is to create a simple image slider. Create a container for the images to slide and hide the overflow contents. Stack the images horizontally inside a container and slide them using the margin-left CSS property. Set the keyframes time intervals to create the sliding effect. Remember that all this is done with px as unit.