Basics of CSS animation
Reading Time:
Reading Time:
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.
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 animationName {
from {
// properties to animate
}
50% {
// properties to animate
}
to {
// properties to animate
}
}
Here is the complete list of properties that can be animated.
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 |
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.
<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>
.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.