Slide Animation
Having a visual effect when sliding can make it easier to distinguish between the current and the next slides.
The fade class of the div containing the slides applies an animation effect that adjusts the opacity when the slide transitions.
First, let's look at the following CSS.
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
The fade class has the animation-name and animation-duration properties.
The animation-name specifies the name of the keyframes (basically the various stages of the animation) to be used in the animation. In this case, we used a keyframe named fade.
The animation-duration specifies the length of time it takes for the animation to complete one cycle. Here, the time is set to 1.5 seconds.
@keyframes is a CSS rule for defining keyframe animations. We defined a keyframe animation with the name fade.
The from keyword denotes the starting point of the animation, and the to keyword denotes the ending point of the animation.
Within the animation keyframes, we used the opacity property to adjust the transparency.
The CSS opacity property represents transparency with values ranging from 0 to 1, where values closer to 0 are more transparent and values closer to 1 are more opaque.
Therefore, the .fade CSS class creates an animation effect where the element it is applied to starts with an opacity of 0.4 and reaches an opacity of 1 after 1.5 seconds.
This gives a natural fade-in effect as a new slide appears, with the opacity gradually changing.
Next, let's change the style of the carousel buttons.
Want to learn more?
Join CodeFriends Plus membership or enroll in a course to start your journey.