This content originally appeared on DEV Community and was authored by Cindy Kandie
Introduction
CSS animations and transitions are powerful tools that can bring your web pages to life. They allow you to create smooth, engaging, visually appealing effects that enhance the user experience. Whether you're looking to add simple transitions between states or complex animations that capture attention, understanding the basics of these features is essential. In this guide, we'll cover how to create a fade-in effect, the difference between CSS transitions and animations, create an infinite keyframe animation, delay the start of a transition, and use animation timing functions to create a bounce effect.
You can interact and play with the code through the Codepens I added for each example!
How do I create a fade-in effect using CSS animations?
To create a fade-in effect, you can use the @keyframes rule to define the stages of the animation. The keyframes specify the starting and ending states of the animation, and the animation property applies the animation to an element. Here's an example:
In this code:
The
.fade-inclass applies thefadeInanimation over 2 seconds with anease-in-outtiming function.The
@keyframes fadeInrule defines the animation, changing theopacityfrom 0 to 1.
What is the difference between CSS transitions and animations?
CSS Transitions:
Used for simple state changes when an element changes from one state to another.
Require a trigger (like
:hover,:focus, or:checked) to start the transition.Automatically interpolates the properties from the initial state to the final state.
In this example, the background color of the .box element will transition to blue over 0.5 seconds when hovered.
CSS Animations:
Used for more complex sequences of animations, involving multiple stages.
Defined using
@keyframesand do not require a trigger to start.Can run automatically, loop infinitely, and provide more control over timing and sequencing.
In this example, the .rotate class applies a continuous rotation animation that completes one full rotation every 2 seconds.
How do I create a keyframe animation that runs infinitely?
To create an animation that runs infinitely, use the animation-iteration-count property with the value infinite. This makes the animation loop indefinitely. Here's an example:
The .spin class will cause the element to rotate continuously, completing one full rotation every 2 seconds.
How can I delay the start of a CSS transition?
To delay the start of a transition, use the transition-delay property. This property specifies how long the transition should wait before starting. Here's an example:
In this example, the background color will change to hotpink 2 seconds after the :hover event is triggered, and the transition will take 0.5 seconds to complete.
How do I use the animation-timing-function to create a bounce effect?
The animation-timing-function property can be used with custom cubic-bezier values or predefined keywords to create various effects. For a bounce effect, you can define keyframes and use ease or custom cubic-bezier values. Here's an example:
In this example:
The
@keyframes bouncerule defines the bounce effect by moving the element up and down.The
.bounceclass applies thebounceanimation, which repeats every 2 seconds indefinitely with aneasetiming function.
Conclusion
I hope this article was helpful, see you on the next one!
This content originally appeared on DEV Community and was authored by Cindy Kandie
Cindy Kandie | Sciencx (2024-07-20T01:34:23+00:00) CSS Animations and Transitions: Quick Guide. Retrieved from https://www.scien.cx/2024/07/20/css-animations-and-transitions-quick-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.