How to animate an image with pure CSS?
Navigation
To animate an image with pure CSS, it's possible to use CSS keyframes and the CSS animation property. To do it, we'll create a simple HTML page with the page and we'll add an inline CSS code -
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animated-image {
animation: rotate 5s linear infinite;
}
</style>
</head>
<body>
<img src="image.jpg" class="animated-image">
</body>
</html>
In the CSS, we define the keyframes for the animation using @keyframes. and specify different levels of animation with percentage values (from 0% to 100%) and the we apply the animation to the image using the animation property.
In the example above, the animation name is "rotate"," the duration is 5 seconds, the timing function is linear (i.e. constant speed), and the animation repeats infinitely.
You can explore different CSS properties and keyframes to create different types of animations, such as fading, scaling, moving, and more.