3. 간단한 애니메이션 모션그래픽 만들기
transform-origin
속성 활용
.motion .box_right {width: 30px;height:30px; background-color:#691c46;z-index:10; transform-origin: 199px 163px; -webkit-transform-origin: 199px 163px; -moz-transform-origin: 199px 163px; -o-transform-origin: 199px 163px; -ms-transform-origin: 199px 163px;}
.motion .box_right {
animation-name: hand_move;
animation-duration: .8s; /*한번 재생걸리는시간*/
animation-delay: 0s; /*애니메이션 지연*/
animation-direction: alternate; /* 애니메이션 재생방향 alternate :순방향, reverse: 역방향*/
animation-iteration-count: infinite; /* 애니메이션 재생횟수 infinite 무한*/
animation-play-state: running; /* 애니메이션 재생여부 running :재생 (기본값), paused(애니메이션정지)*/
animation-timing-function: linear; /*애니메이션 가속도 설정 linear, ease, ease-in, ease-out, custom 등*/
animation-fill-mode: both;
}
@keyframes hand_move {
0%{
transform:rotate(-140deg);
}
100%{
transform:rotate(4deg);
}
}