INTRODUCTION
I have been learning about CSS basics for sometime now and today, I decided to share what I learnt. I mostly decide to post a blog on the ones I find confusing (sort of helps me to understand better, almost like teaching myself). We are going to be discussing about CSS animations, focusing mainly on background colors and positions.
CSS ANIMATIONS
📌 CSS animations help create moving elements and 'animations' in your webpage without the use of JavaScript but mainly CSS.
To make a div element (container) move to different places on a webpage and change colors, we have to use something called a keyframe. CSS styles specified inside the keyframe rule would allow the animation to gradually change from a current style, to a new style at a certain time. Lets say we have a scenario where we want to move a box from one point to another of the screen. Whiles the box moves, we want the color to change at a specified time.
The timing the box would have to be specified in the keyframe by percentages (this could be explained further in the post). This is when the animation-duration property how long an animation would take to complete. Understanding the animation-duration property and the keyframe would allow you to change colors of an element and also, change their positioning. To make it simpler to understand, just take the animation-duration to be the time your animation would last (could be 10s, 20s or even less depending on your preference). And the keyframe to be a property that tells the box to change a color at a specified time. (If you are lost, don't be. I am going to give a demonstrative explanation)
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example; /* Standard syntax */
animation-duration: 4s; /* Standard syntax */
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Looking at the block of code above, you would realize a 'webkit...' thingy over there. It is basically the code for safari because, some of the standard CSS properties do not work with the safari (ios) browser. It is advisable to always include it alongside with the standard properties just incase.
I stated the animation duration to be 4s (seconds). And the keyframe has some percentages aligned to each background color. This means that, your animation has 4 seconds to run.
Within 4 seconds;
📌At 0% (of the 4s, which is the going to be the default color when you run the code), the background color would be red and be at the left side of the screen (because left is set to 0px).
📌At 25%, the background color would then change to the color yellow and put 200px on the left side of the box (this would move the box to the right).
📌At 50%, the background color would change to blue and move downwards to the right because there is 200px for both left and top.
📌At 75%, the background color would change to green and move back to the left downwards because the left is now 0px and top is 200px.
Lastly at 100%, it would go back to its original position and color. This block of code above would make the box move in four corners. The importance of the keyframe is to specify the styles you would want to add to your animations.
CONCLUSION
One thing you should always specify is the number of the seconds the animation duration would take. And the percentages is well (in the keyframe). This is because, the default value is always zero (0) so if you forget to indicate the exact time the animation should last, it would not take any effects. Thanks for reading!
Top comments (0)