CSS/애니메이션
CSS 애니메이션 예제
Socratone
2020. 4. 3. 15:34
div {
width: 100px;
height: 100px;
position: relative;
background-color: antiquewhite;
/* 아래 정의한 keyframes를 가져온다. 여럿을 지정할 수도 있다. */
animation-name: move;
animation-duration: 3s;
animation-iteration-count: infinite; /* 반복 횟수 */
}
@keyframes move {
0% { left: 0; }
50% { left: 300px; }
100% { left: 0; }
}
/* 아래와 같이 할 수도 있다. */
@keyframes move {
from { left: 0; } /* 0에서 300px로 */
to { left: 300px; }
}
animation-direction: alternate; /* 홀수번째는 정방향 짝수번째는 역방향 */