Animations in HTML basically convert one style to another through CSS. It switches up the style with a little bounce. You can change the properties through animation as many times as you want. To use CSS animations, you must specify a certain number of keyframes for the animation.
Let's have a look on a below code :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation: example 4s infinite;
}
@keyframes example {
from {
background-color: orangered;
}
to {
background-color: greenyellow;
}
}
</style>
</head>
<body>
<div></div>
<p><b>Note:</b> When an animation is finished, it continue back from its original style.</p>
</body>
</html>
Hope this information will be helpful for you.
Happy Coding!
Markdown for AI
A clean, structured version of this page for AI assistants and LLMs.
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
Privacy Policy.
Animations in HTML basically convert one style to another through CSS. It switches up the style with a little bounce. You can change the properties through animation as many times as you want. To use CSS animations, you must specify a certain number of keyframes for the animation.
Let's have a look on a below code :
Hope this information will be helpful for you.
Happy Coding!