پیشنمایش زنده
کد HTML
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
کد CSS
.square {
margin: 2em;
background-color: white;
animation: rotate 2s linear infinite;
}
.container {
display: flex;
justify-content: space-between;
}
@keyframes rotate {
0% {
width: 4em;
height: 4em;
}
50% {
width: 8em;
height: 8em;
transform: rotate(360deg);
background-color: aqua;
}
100% {
transform: rotate(360deg);
width: 4em;
height: 4em;
}
}