IPYesterday,I had created code using Html and CSS.I enjoyed a lot while making this.I used a lot of property of CSS like animation,gradient ,background color etc.When I ran this code,my level of happiness was on the cloud.Specially I wanted mention ,how beautiful it was looking when the div section smoothly go here and there.
So,I wanted to share this happy code along with you.
Here is the code of Html :-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>animation</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="ease"></div>
<div class="ease-in"></div>
<div class="ease-out"></div>
<div class="ease-in-out"></div>
</body>
</html>
Here is the code of CSS :-
div{
width:200px;
height: 100px;
background-color: orangered;
position: relative;
animation-name: colorchange; animation-duration: 4s;
animation-direction:alternate; animation-delay: 3s;
animation-iteration-count: infinite; animation-fill-mode: both;
}
@keyframes colorchange{
from{ background-color: red;
left: 0px;
top: 0px;
right: 20px;
bottom:67px;
} to{ background-color: aqua;
left: 200px;
top:0px;
bottom:300px;
right: 200px;
}
}
.ease{
background-image: radial-gradient(red,pink);
animation-timing-function: ease;
}
.ease-in{
background-image: repeating-radial-gradient(yellow,orange,red);
animation-timing-function: ease-in;
}
.ease-out{
background-image: linear-gradient(aqua,blue,purple);
animation-timing-function: ease-out; }
.ease-in-out{
background-image: conic-gradient(purple,pink);
animation-timing-function: ease-in-out;
}