Animation in CSS can be achieved using the @keyframes rule along with the animation property.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation with keyframes</title>
<style> /* Define animation keyframes */
@keyframes auto {
0% { transform: translateX(50px); background-color: green; }
50% { transform: translateY(50px); background-color: #333; }
100% { transform: translate(0px, 0px); background-color: light gray; }
}
/* Apply animation to a Container */
#animatedContainer {
width: 100px;
height: 100px;
background-color: #F5F5F5;
animation: auto 4s infinite; /* Name, duration, iteration count */
}</style>
</head>
<body>
<div id="animatedContainer"></div>
</body>
</html>
We define an animation called "auto" using @keyframes, which specifies the background color at different points in time (0%, 50%, and 100%).
Then, we apply this animation to a
The animation lasts for 4 seconds (4s) and repeats indefinitely (infinite).
We can customise the animation by adjusting the keyframes and their properties.
CSS animations can be applied to various CSS properties, providing a wide range of possibilities for creating dynamic effects on web pages.