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!
Join MindStick Community
You need to log in or register to vote on answers or questions.
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!