A touch of CSS animation goes a long way in designing an immersive experience for visitors. The best animations can serve the content and user experience without distracting or appearing gimmicky. In this blog, we talk about how to animate in CSS with examples.
Being a front-end developer, creating a beautiful UI with a pleasing user experience is an important part of the job. Adding animations to a website contributes a lot towards this goal. It not only makes our website look good but also makes it stand out from the rest.
Animations play a critical role in improving the experience of users as they assist in providing improved visual feedback and help in making interactions with the website striking.
They are also a great way to highlight interactive elements and add interest and fun to the designs.
Animation is basically changing a UI element’s style continuously over a period of time. In CSS, to assign a particular style to a particular time interval, we use the @keyframes rule.
Let’s start by creating a basic animation of a sliding box.
We will be using below HTML template throughout:
There are two ways to use this rule:
The first thing to note is, <animation-name> can be any name you want to give to your animation. It can very well be like @keyframes myAnimationOfSliding. But, for the sake of relevance and simplicity, let us name our animation as slide
Inside our @keyframes rule, we provide the element’s style at the initial state and final state of its entire duration. In our case of a sliding box, the rule would look like this:
Here, we are changing the X-axis position of our element from 0px to 500px.
We could very well write this in the percentage form like:
The benefit of using the percentage form is that you get more control over the timeline stages of your animation. If you want some different styles at say 50% of your animation duration, you can just add required styles in a similar manner like:
At this point, we have just created a new animation. But we still have not applied it to any element. To do that we use animation-name and animation-duration CSS properties. As the names suggest, animation-name tells our element which animation should be used and animation-duration tells how long the animation must last. Let’s add these to our box class which we have used in our HTML file.
And there you have it, you have created your very first animation! 🎉🎉🎉
Now let us deep dive a little more and learn about various other animation properties we can use to make our animation a little more customizable.
The name of the animation to be applied to an element.
It tells how long you want an animation’s timeline should be. It defaults to 0 seconds i.e. If you won’t provide any value to this property you won’t be seeing any animation on the screen. Also, it accepts only positive values.
This is used to control the speed of our animation throughout its timeline. CSS provides us with some ready-to-use values for controlling the animation speed:
1. Linear: The animation speed would be constant throughout the duration.
2. Ease: The speed would gradually increase till the middle of the animation, and would slow back down at the end. This is the default value used.
3. Ease-in: The speed would be slow at the start and will increase till end of the animation.
4. Ease-out: The animation would start quickly at the beginning and slow down at the end.
5. Ease-in-out: The animation would start slowly, speed up and then end slowly.
Besides these predefined values, if you want more control over the animation’s timing, you could use cubic-bezier(p1, p2, p3, p4) function to provide a custom time-speed curve. You can also use this super awesome curve generator to easily generate the values.
You can also use the steps(interval, jumpterm) function to control the speed in an interval-based style instead of using a curve-based approach.
This defines the time to wait before starting the animation. Unlike the animation-duration property, you can define this as a negative value. If you set a negative value, the timeline in your @keyframes will start at that point. For example, if your animation is 10 seconds long and you set animation-delay to -5s, it will start halfway along your timeline.
Note: animation-delay only delays the animation once at the beginning. After that, the animation keeps on running continuously.
It defines the number of times the animation should run. By default, it is set to 1 i.e. the animation would run only once. This also accepts only positive values. You can provide infinite value to make the animation run in a loop.
You can set the direction of running the keyframes by using this property. Below are the possible values:
If you remember, in our initial example of the sliding box, after the animation completes, it reverts back to its original state. But, in case you want to persist the state of animation, animation-fill-mode is used. It can take these below values:
It allows us to play/pause the animation. It takes running and paused as possible values. On resuming, the animation starts from the same state it was paused.
You can also use the shorthand notation to use these properties in one go instead of specifying each of them individually.
You can also apply multiple animations to an element by chaining them together. Just separate each animation with a comma in the CSS.
In the above example, we have chained together two animations - one for sliding and one for changing the background color.
Note that both animations start at the same time. If you want some animation to start at a later point, you can use animation-delay property.
Note: If multiple animations are changing the same property for an element, only the last animation would be effective as it would override the previous ones. For example, if “slide” and “rotate” animations are applied on the same element, only “rotate” would take effect (assuming it is last in order) as both animations are changing the “transform” property.
Solution: To overcome this issue, you can wrap the element in another div tag and apply one animation to it. This will prevent the animations from overriding each other. You can also use animation-delay property, as needed, to generate the desired effect.
Do check our next blog on how to animate in Tailwind.
This comprehensive blog explores the significance of UI frameworks, theming in React applications, popular UI frameworks such as MaterialUI, Bootstrap, and Ant Design, along with their strengths and weaknesses. It delves into the importance of theming for consistent UI/UX, provides insights into various theming approaches in React, and offers a step-by-step guide on implementing theming in React applications.
Discover how Polars, a powerful Rust-based DataFrame library for Python, revolutionizes high-performance data analysis and manipulation. Explore its key features, from speed and efficiency to data manipulation capabilities and lazy evaluation.
In this blog, we cover a wide range of topics, including monitoring, optimization, design patterns, error handling, security measures, scalability, and cost optimization, providing valuable insights and guidance for data engineers and practitioners working with big data processing on cloud platforms like Amazon EMR.