Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a custom animation using CSS keyframes?
Asked on Mar 25, 2026
Answer
Creating custom animations with CSS keyframes involves defining the animation's stages and applying it to an element. Here's a basic example to illustrate how you can achieve this.
<!-- BEGIN COPY / PASTE -->
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
animation: moveAndFade 3s infinite;
}
@keyframes moveAndFade {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(100px);
opacity: 0.5;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
</style>
<div class="animated-box"></div>
<!-- END COPY / PASTE -->Additional Comment:
- Define keyframes using the "@keyframes" rule, specifying the animation's name and stages with percentages.
- Apply the animation to an element using the "animation" property, which includes the animation name, duration, and other optional parameters like timing function and iteration count.
- Animations can be customized further with properties like "animation-delay" and "animation-direction".
Recommended Links:
