You can animate an image using CSS by applying keyframe animations.
Here's a simple example of how you can create a basic image animation on hover:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Animation</title>
<style>
img {
width: 200px;
height: 200px;
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<img src="your-image.jpg" alt="Animated Image">
</body>
</html>
In this example, the image will scale up by 20% when hovered over, creating a simple zoom effect.
You can customize the animation by adjusting the transform property values or adding more keyframes.
If you want a more complex animation, you can use @keyframes to define your animation steps.
Here's an example of a pulsating animation:
@keyframes pulsate {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
img {
width: 200px;
height: 200px;
animation: pulsate 2s infinite;
}
In this example, the image will pulsate (scale up and down) continuously over a 2-second duration.
Remember to replace "your-image.jpg" with the actual path or URL to your image.
You can experiment with these examples and adjust the styles and animation properties to achieve the desired effect for your image.