What is CSS Animations?
CSS animations include methods or techniques applied to change the behavior and appearance of elements on a webpage.
Types of CSS Animations
There are several ways to create animations in CSS, they include;
Transitions: CSS transitions are used to animate the change of property values over a period of time. A property can be changed when hovered over or focused on. To work with transitions, we need a component that has a change in property, e.g. button, input, p, etc. In this example, we’ll use the button element and create a simple transition that will make it rotate when we hover over it.
HTML
<button class="rotate-btn">Hover</button>
CSS
.rotate-btn{
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s ease;
}
.rotate-btn:hover {
transform: rotate(360deg);
}
In this example, the transition property takes in the transform property, which means we are specifying that we want to transition the property “transform”.
We also set the value to 0.2s duration which determines the time it would take for the effect to occur. Another value we can see in the above code is ease. This determines the way the transition moves; ease creates a smooth movement of the element involved. There are other timing functions such as ease-in, ease-out, and linear.
Animations: The animation property is used for creating more controlled, customized, and complex animations using key frames and advanced control over the animation sequence. This property defines animation names, delay times, timing functions, iterations, etc.
Simple animation example
<button class="grow-btn">Grow</button>
.grow-btn{
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
animation: grow 0.2s ease;
}
@keyframes grow {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
There are several types of animation properties, they include;
Animation name: Specifies the name of the keyframe you want to bind to the CSS selector.
Animation duration: Specifies the duration an animation takes to complete in seconds or milliseconds.
Animation timing function: Specifies the movement of the animation or the speed curve.
Animation Iteration Count: Specifies the amount of time you want the animation to repeat itself.
Animation fill mode: Specifies what values the animation applies outside the time it is executing or before and after the animation
Animation delay: Specifies a delay before the animation starts
Animation direction: Specifies the direction of the animation. It could go in reverse or in cycles.
Animation play state: This sets the animation to run or pause
Keyframes: This rule defines the behavior of the animation at different points in time. In the example below, we can see that we set different properties with their value and, also we defined the keyframe so that it can determine the way the elements behave at 0% , 50%, 100%
.block{
animation-name: blockAnimation;
animation-duration:3s;
animation-delay:1s;
animation-timing-function:ease-out;
animation-iteration-count:infinite;
animation-direction: alternate;
animation-fill-mode:both;
animation-play-state:running;
}
@keyframes blockAnimation {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}
These examples are just the basics of what can be achieved using transitions and animations; they can be a little more complex and sophisticated. Also, you can combine animations and transitions to create a more sophisticated design.
Does CSS Animation Slow Down a Website?
The performance of every website must be considered to deliver a smooth user experience. Performance is considered to be the quality of system output in response to users' input, and it’s how the website controls and delivers content to users. CSS animations can slow down the way your website loads if they're not used correctly.
There are effective techniques to follow when working with CSS animations to avoid this situation. Here are a few techniques to follow when working with animations in CSS:
Limit Animations: Animations are great ways to keep your website fun and active, but they must be used with caution. Ever heard of the saying too many cooks spoil the broth? In this case, too many animations can strain browser resources and make the website load slowly. Apart from that, when the page becomes too busy, it becomes distracting for users.
Lazy Loading: Lazy loading is a technique that is used to delay the elements on the page you do not want visible yet.
Reduce CSS SIZE: by optimizing the CSS file by removing duplicate declarations, using shorthand properties, keeping stylesheet rules in one location, and avoiding too many nested selectors that make it difficult for the browser to parse.
Optimize Images: Ensure that images are optimized for the web. Using compressed image formats like JPEG or PNG can also reduce load time.
Browser Caching: by configuring server-side caching and leverage browser caching to reduce the need to re-download CSS on subsequent visits.
Heavy Framework/Libraries: Using large frameworks or libraries for animations that aren’t optimized or used fully can make your website bulky, increasing load time.
