animation
iteration-count
- 애니메이션의 반복 횟수 설정
- 따로 설정하지 않으면 1번만 재생
direction
-
애니메이션을 앞으로 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부 설정
-
normal
- 정방향
-
reverse
- 매 사이클마다 역방향으로 재생
-
alternate
- 매 사이클마다 각 주기의 방향을 뒤집으며, 첫번째 반복은 정방향
-
alternate-resverse
- 매 사이클마다 각 주기의 방향을 뒤집으며, 첫번째 반복은 역방향
<!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">
<link rel="stylesheet" href="styles/animation-part.2.css">
<title>CSS</title>
</head>
<body>
<div class="box1">
a
</div>
</body>
</html>div {
width:100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: rgb(245,255,199);
}
.box1{
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate-reverse;
}
@keyframes rotate{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
함께 성장하는 것을 좋아하는 프론트엔드 개발자