CSS animation
In CSS, animations are used to animate elements in a more dynamic way. You can create animations using keyframes to define the style changes that occur throughout the animation.
Here's a simple example of how CSS animation works:
@keyframes move {
0% { transform: translateY(0); }
50% { transform: translateY(100px); }
100% { transform: translateY(0); }
}
.box {
width: 100px;
height: 100px;
background-color: blue;
animation: move 2s infinite;
}
In this example, we define a keyframe animation called move
that moves an element up and down using the transform
property. The animation lasts for 2 seconds and repeats infinitely.
You can customize the keyframes to create different types of animations like fading, rotating, scaling, and more. Play around with different values to see how you can create interesting animations on your website.