How can I use keyframes to create an infinite CSS animation loop?
Asked on Sep 12, 2025
Answer
To create an infinite CSS animation loop using keyframes, you define the animation's keyframes and set the animation to loop indefinitely. Here's a simple example to illustrate this.
<!-- BEGIN COPY / PASTE -->
<style>
@keyframes exampleAnimation {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
.animated-element {
width: 100px;
height: 100px;
background-color: lightblue;
animation: exampleAnimation 2s infinite linear;
}
</style>
<div class="animated-element"></div>
<!-- END COPY / PASTE -->Additional Comment:
- Use the "animation" property to define the animation name, duration, iteration count, and timing function.
- The "infinite" keyword makes the animation loop indefinitely.
- The "linear" timing function ensures a constant speed throughout the animation.
- You can adjust the duration (e.g., "2s") to speed up or slow down the animation cycle.
Recommended Links: