Animation in css practice
animation property in css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Propertiy in css</title>
</head>
<style>
.container{
background-color: aqua;
height: 300px;
width: 100%;
}
.box{
height: 200px;
width: 200px;
position: absolute;
background-color: red;
border: 3px solid white;
/* set animation name */
animation-name: vishal-usrate;
/* duration of the animation */
animation-duration: 3s;
/* iteration type of the animation */
animation-iteration-count: infinite;
/* animation state */
animation-fill-mode:forwards;
/* delay the animation */
animation-delay: 3s;
}
/* you put the animation in the @keyframes */
@keyframes vishal-usrate {
from{
width: 300px;
}
to{
width: 1000px;
}
}
</style>
<body>
<div class="container">
<div class="box">
This is the dummy container
</div>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.