Learn CSS animation in one project

Prior to the introduction of CSS over 2 decades ago, Web development was monotonous and appeared boring. Adequate knowledge of creating aesthetically pleasing CSS animations and transitions would help in making your website stand out and give the user a beautiful experience while on your site. In this tutorial, I hope to walk you through the steps of creating animations on your website with just your basic knowledge of CSS and HTML and thereafter we would create an exquisite animation project, harnessing our learnt knowledge. Let’s begin!!!.

First of all, what is an animation? It is simply creating an illusion of movement of an object in a well defined sequence. Animations can be performed in CSS by utilizing the following CSS functions namely;

Transition: This functionality allows you to determine the transition between two states of an element. It also enables you to control the animation speed when changing CSS properties of an element. CSS Animation: This functionality allows you to animate a change in style of properties of an element CSS Transform: This allows you to apply a 2D or 3D transformation to an element. It also allows you to rotate, move, skew and scale an element in any direction. Right now, we would like to look at each functionality separately and delve into each peculiarity.

CSS Transitions In CSS transitions, the following parameters can be used; Transition-duration: The duration or period in seconds over which the transition must take place. Transition-delay: This is the required time to be elapsed before the transition can occur.
Transition timing function: It involves and describes how the values move during transition. It includes the ease-in, ease-out, ease-in-out etc. So right now, we would be practicing all what we learnt by working on a small project.

div {
height: 100px;
width: 100px
background-color: blue;
transition-duration: 2s, 500ms;
transition-delay: 0s, 1s;
transition-property: height, width;
}
Div:hover {
Height: 250px;
Width: 250px
}

CSS animations Right now, we would then move on to CSS animation property. In CSS animation functionality, it includes parameters already discussed in CSS transitions. However, I would like to introduce an important parameter that can also be used in CSS animation, the key Frame. The Key Frame functionality allows you as a developer to define multiple animation key points. Using this feature, you can specify a set time with a percentage value e.g. 40% for the period of time where the attribute for the particular key frames are set. To further expatiate on this parameter, we would be creating a basic CSS animation that animates the rainbow as a background.

keyframe background-color sets the name of the animation to background-color. Also important to note is the animation-iteration-count. This refers to the number of times the animation will loop. Setting it to indefinite in this exercise means the animation will play indefinitely. Lastly, we would then talk about another CSS functionality known as CSS transforms CSS Transforms: This functionality enables you as a developer to modify shapes and position of objects in your web page. It is an integral part of CSS animations. Under this, there are some features we would love to explain in details. Rotate(x): This feature allows you as a developer to define a transformation that allows the element to move around a fixed point on the z-axis. Let’s see an example

.rotate {
Width: 100px;
Height: 100px;
Background: orange;
Transform: rotate (60deg)
}

Skew(x, y): This is said to be used in the distortion of each point of an element by a certain angle in either the horizontal or vertical direction. Translate(x, y): this feature allows the movement of the position of an element around the X and the Y axis. Also, worthy of note is the ability to include multiple transformations in an element. So far, we have discussed the basics of CSS animations. We would then work on animating a carousel based on the knowledge gotten from this tutorial.