CSS 스타일링

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 300px;
height: 300px;
border: 2px solid red;
border-radius: 50px;
background-color: aqua;

animation-name: box_ani;
/* 애니메이션 이름 */
animation: name duration timing-function delay iteration-count direction fill-mode;
/* 애니메이션 축약 */
animation-duration: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;



}
@keyframes box_ani {
from{
transform: translate(0,0);
}

30%{
width: 200px;
height: 200px;
border-radius: 50px;
transform: scale(1.01s);
transform: translateY(100px);

transform: rotateZ(90deg);
background-color: rgb(117, 117, 28);
}
50%{
width: 300px;
height: 300px;
border-radius: 150px;
transform: scale(1.02s);
transform: translateY(200px);
transform: rotateZ(180deg);
background-color: beige;
}
80%{
width: 400px;
height: 400px;
border-radius: 300px;
transform: scale(1.03s);
transform: translateY(200px);
transform: rotateZ(270deg);
background-color: rgb(165, 165, 45);
}
to{
transform: translate(200px,200px);
}

}
</style>
</head>
<body>

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

</body>
</html>