- An animation lets an element gradually change from one style to another.
You can change CSS properties, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
Code:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#andiv {
width: 100px;
height: 100px;
animation: animation_name 1s infinite;
}
@-webkit-keyframes animation_name {
from {
background-color: green;
}
to {
background-color: yellow;
}
}
@keyframes animation_name {
from {
background-color: green;
}
to {
background-color: yellow;
}
}
</style>
</head>
<body>
<div id="andiv"></div>
</body>
</html>
Css:- simple animation
Reviewed by Network security
on
May 13, 2019
Rating:
Reviewed by Network security
on
May 13, 2019
Rating:
No comments: