In this topic,
We are going to see how to create simple zoom-in and zoom-out animation using single div.
Step-1: Create Html Code in the index.html file.
<div> </div>
Step-2: Add CSS Code in the <style>…</style> on index.html file.
div {
animation-name: my-animation;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: linear;
width: 300px;
height: 100px;
border-radius: 10px;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
@keyframes my-animation {
from {
background-color: #ff3300;
width: 300px;
top: 10px;
}
to {
background-color: #006c17;
width: 50px;
top: 100px;
}
}
Review the below video.
