CSS animation is a powerful tool that you can use to make your web pages more interesting and engaging. With CSS animation, you can create simple animations that are easy to control, or complex animations that are difficult to create with other methods. In this article, we'll explore the basics of CSS animation and show you how to use it in your own projects.
The first thing you need to know about CSS animation is that it works by animating properties of elements on the page. These properties can be anything from the position of an element on the page to its color or size. You can animate any property that you want, as long as there is a way to change it over time.
Once you've decided which property you want to animate, you need to set up a keyframe rule for it. A keyframe rule defines what the property will look like at different points in time during the animation. To create a keyframe rule, you start by specifying the name of the property that you want to animate followed by a colon (:). After that, you specify two values: one for when the animation starts and one for when it ends. Here's an example:
div { width: 100px; height: 100px; background-color: blue; }
@keyframes myAnimation { 0% { width: 100px; height: 50px;
background-color: red;} 50% { width: 200px; height: 150px;
background-color: green;} 100% { width: 100px; height: 50px;
background-color: red;} }
This example, we're animating the width and height of a div element. We've defined three keyframes called "0%" , "50%" , and "100%" . The "0%" keyframe sets the element's width and height back to their original values (100 pixels wide and tall), while the "50%" and "100%" keyframes set them both to 200 pixels wide and 150 pixels tall respectively. As each keyframe is reached during playback, the browser will apply whatever styles are defined within it until it reaches either another keyframe or the end of the animation sequence.
You can also add multiple properties into a single keyframe rule if needed. For example, if you wanted to animate both an element's width and its color at once, you could do something like this:
@keyframes myAnimation { 0% {width : 100px ; color : black;}
50%{width : 200px ; color : white;} 100%{width : 100px ;
color : black;} }
In this example, the element's width will change from 100 pixels to 200 pixels at the 50% mark, and its color will change from black to white.
Once you've created your keyframe rule, you need to add it to your HTML document. To do this, you use the animation property. The animation property takes two values: the name of the keyframe rule that you want to use and how long you want the animation to run for. Here's an example:
div { width: 100px; height: 100px; background-color: blue; }
@keyframes myAnimation { 0% {width: 100px; height: 50px;
background-color: red;} 50% {width: 200px; height: 150px;
background-color: green;} 100% {width: 100px; height: 50px;
background-color: red;} } div{animation : myAnimation 2s;}
In this example, we're using our "myAnimation" keyframe rule on a div element. We're telling the browser that we want the animation to last for 2 seconds (2000 milliseconds). You can also specify fractions of a second if needed. For example, "0.5s" would mean 500 milliseconds.
That's all there is to basic CSS animations! With just a few lines of code, you can create simple or complex animations that will add interest and interactivity to your web pages.
Please kindly follow for more mini articles on front-end development.
or contact me via email brianlemba2@gmail.com
Thanks ❤️
Top comments (0)