CSS Animation is a property in CSS code that allows the transformation of images, texts, and figures from one form to another by changing the appearance and action it displays on the site.
These animations add unique styles to our website by making the figures, texts, or images increase or decrease; stretch or compress; rotate or skew; zoom or reduce in constant motion.
All these give the website a sense of interaction between its guests (i.e. those visiting the site).
The CSS animation can be applied to one’s logo, buttons, certain input types, small images, and a view on the site to make it look catchy and fascinating to one’s view.
At the end of this article, readers should know the following;
- The need for CSS animations.
- How to apply certain animation skills
Some of the key Animation major properties that are commonly added in the CSS include;
- Keyframes are usually embedded in the CSS code as “@keyframes“ to specify how the animation should play.
- Animation-delay: delays the beginning of animation.
- Animation duration: determines the length at which the animation effect will take place.
- Animation-direction: specifies movement of the animation, whether backward, forward, upward, downward or alternate.
- Animation-name: gives names to the keyframes of the animation.
- Animation-iteration-count: could be infinite or number specific. It sets the number of times the animation should run.
- Animation-timing-function: a property that defines the direction and pattern of the speed of the animation.
WAYS TO APPLY CSS ANIMATION.
Before applying our CSS animation, there are three (3) main things we do;
Create your HTML element.
Style the HTML element to be animated with CSS.
Apply your Keyframes that determine the change or transformation of the animation at certain intervals.
Let’s try some Animation Skills;
Changing Colors Scheme
Colours add beautiful features to websites. It makes the sites look cool and amazing. Of course, people are moved by what they see, and colours create that sense of engrossment by winning the viewer‘s eyes. A sample of such colour effect animation is shown in the code below;
The result becomes;
The code above has keyframes that change the colour of the element for four seconds from blue to yellow, and after these four seconds, it returns to the original background colour given (red). Only if we use infinite in the animation – duration, the effect is non-stop.
Sliding Text
Sometimes when our website is being loaded, some texts appear as slides. It could be sliding from up, left, right, or bottom of the web page. Let’s review an example of the Sliding left effect.
The output becomes;
If you look carefully at the code above, you will notice in the keyframes the left property is used from 0% (from the beginning of the animation) to 100% (end of the effect). If we were to slide from the bottom, top, or right we would change the left values to bottom, top, and right, respectively.
Switching Texts/Fonts
Another easy animation effect that changes texts or even images on the sight. It gives the viewers an attractive view. An easy way to produce this is shown in the code below;
If you look closely at the code, you will observe I gave my animation a name, switch, and a duration of four seconds because I want the effect to last for that four seconds.
The switch is assigned to the keyframes, so any value I give will affect the animation.
The texts are given the same class, “text”, and are styled each with the “nth-child ()” property.
The output becomes;
Zooming buttons
In our forms, after filling in the information, sometimes we see a button blinking, making the site look beautiful. Its very simple to create, and here is how it is done;
Notice that I gave an animation name; click on the button because that is where it will take effect. thereafter, I assigned it to the keyframes, from 0% (the beginning, to 100% (in this case, the end, not the end of the animation) as the color and background changed. The 50% indicates the reverse of the animation as it is blinking. This is the output below, and carefully take note of the changes in color as in the code;
This zooming effect can also be applied to images, figures, or texts. All you have to do is to insert what you want to zoom in place of the button and increase the size to your taste in the keyframes.
Image Switch
Just like the text switch, we can also create a room where the images of the site change automatically. Sometimes one can use it as a means to display different products. This code is quite similar to the one discussed in number three (3).
Here, you put the name of my image in place of where you would have put my text if we were dealing with text.
Note that you also have to specify the height and width of the images used, and the div was given the id= “con” carrying them for proper alignment.
The result becomes;
Lazy Loader
The lazy loader is usually used on a site in form of delay as the site loads its main content. An attractive animation called the lazy loader can sometimes be used instead of showing a blank page while the site loads. The code is shown below;
First, I created my HTML loader element, styled it, and applied the keyframe stylings.
The rotate property was used to indicate that there is a continuous rotation. It is coded that the loader should rotate from zero (0) degrees to 360 degrees with an infinite animation iteration count.
The output becomes;
Bouncing Effect
This bouncing effect can also be used as a pre-loader of a website. Aside from that, it can be used in the main website and gives the viewer’s eyes an engaging feature.
The code is shown below;
In the code above, after creating my HTML element, I gave it some styling with a border radius of 50% so that it could have an even roundness like a ball.
The property style used in the keyframes is translated. Since I want the HTML element created to go upwards and downwards.
The negative sign in the transform property and the alternate value in the animation property give the HTML element a bouncing-back effect.
It also made the animation continuous by giving it an infinite animation-duration.
The output becomes;
Inside the HTML element, an icon such as arrows, signs, or text can be placed depending on your wants.
Conclusion
For a proper understanding of this article, basic knowledge of HTML and CSS languages is required.
W3schools and Codejika can be of great help, and to get more interesting articles on how to do this, read more here.
