CSS ANIMATION PROPERTY
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="STLE.CSS">
</head>
<body>
<div>Animation</div>
</body>
</html>
CSS
div{
height: 100px;
width: 100px;
background-color: aqua;
border: 2px solid gold;
position: absolute;
top: 60px;
left: 50px;
animation-name: colorAnimate;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 5;
animation-direction: reverse;
}
@keyframes colorAnimate {
from { background-color: gold;
color: #b42727;}
to { background-color: chartreuse;
color: slategrey;}
from{ left: 0px; }
to{ right: 300px;}
}
.png)
Comments
Post a Comment