CSS Animation Example
CSS animations create lively visual effects without JavaScript.
Introduction
CSS animations allow you to create dynamic and engaging visual effects on web pages without relying on JavaScript. You can define animations using keyframes that describe the changes in an element's style over time.
CSS Animation Example
Let's create a simple animation where a box moves across the screen.
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
animation: move 5s linear infinite;
}
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(300px); }
}Do You Know?
You can use multiple animation properties likeanimation-duration, animation-timing-function, animation-delay, and animation-iteration-count to customize your animations.Summary
- CSS animations provide a way to add dynamic effects to your web pages.
- You define animations using keyframes that specify style changes over time.
- The
animationproperty controls the animation's duration, timing function, delay, and iteration count.