.circle {
animation-name: ani
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate; ---> 역방향으로 다시 진행
animation-timing-function: ease-in;
}
.circle:hover {
animation-play-state: paused;
} --> hover 시 멈춤
@keyframes ani {
from {transform: rotate(0deg)}
to {transform: rotate(360deg)}
} ---> 360도 돌아감
*from을 따로 선언 할 필요 없으면 비워둬도 됨*
벤더프리픽스: 모든 브라우저에서 다 지원 가능할 수 있도록 하는 소스( 경로 링크 걸면 됨- <script src="prefixfree.min.js"></script> )
transform-origin: top right —> transform 중심축을 상단 오른쪽으로 바꿈
transform-origin: 50% 0 -> x축 50% y축 0으로 중심축 이동