Animation in CSS
Animation in CSS
Animation in CSS allow you to create animations and transitions on web pages using only CSS code. You can animate almost any property in CSS, such as the color, size, position, and opacity of an element, to create simple or complex animations.
To create an animation in CSS, you need to define a keyframe animation using the @keyframes rule, and then apply that animation to an element using the animation property. The @keyframes rule defines the animation as a set of keyframes, which are different states of the element at specific points during the animation. You can define as many keyframes as you need to create the desired animation.
Here’s an example of a simple CSS animation that makes a button grow and change color on hover:
HTML:
<button class="animate-btn">Hover Me</button>
CSS:
.animate-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
animation: grow 0.2s ease-in-out;
}
.animate-btn:hover {
background-color: #008CBA;
}
@keyframes grow {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
In this example, we have a button with the class “animate-btn”, which we want to animate when the user hovers over it. We apply the animation to the button using the animation property with the name of the animation (“grow”), the duration (0.2 seconds), and the timing function (ease-in-out).
We then define the @keyframes rule for the “grow” animation, which defines three keyframes: the initial state (0%), the middle state (50%), and the final state (100%). In the initial state, we set the transform property to scale(1), which means the button is not scaled. In the middle state, we set the transform property to scale(1.2), which makes the button grow to 120% of its original size. In the final state, we set the transform property back to scale(1), which means the button returns to its original size.
Finally, we use the :hover pseudo-class to change the background-color of the button to #008CBA when the user hovers over it, creating a color change effect.
When you view this code in a web browser and hover over the button, you will see that it grows and changes color, creating a simple but effective animation.