CSS Animatable properties
Some CSS properties are animatable, meaning that they can be used in animations and transitions.
Animatable properties can change gradually from one value to another, like size, numbers, percentage, and color
Example
Animate the background color from red to blue:
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
Code background animatable CSS:
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 300px;
height: 200px;
background: red;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
</style>
</head>
<body>
<h1>Animation of background-color</h1>
<p>Gradually change the background-color from red to blue:<p>
<div id="myDIV"></div>
</body>
</html>
Output:
Animation of background-color
Gradually change the background-color from red to blue:
Comments :
Post a Comment