[css] animation
animation 효과주기
[ @keyframes ]
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
}
[ animation ]
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];
[ animation-name ]
@keyframes 에 정의된 명칭(중간상태 정의를 위한 설정)
[ animation-duration ]
한사이클의 시간 : s, ms
[ animation-delay ]
시작하는 타이밍 : s, ms
[ animation-iteration-count ]
animation-iteration-count: n; : n번 반복
animation-iteration-count: infinite; : 무한대반복
[ animation-direction ]
normal(default 순방향), alternate(순방향,역방향)
reverse(역방향), alternate-reverse (역방향, 순방향)
animation-direction: alternate;
animation-direction: reverse;
animation-direction: alternate-reverse;
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
animation-timing-function (시간당 속도)
| 설정값 | 내용 |
|---|---|
| linear | 전환(transition) 효과가 처음부터 끝까지 일정한 속도로 진행됩니다. |
| ease | 기본값으로, 전환(transition) 효과가 천천히 시작되어, 그다음에는 빨라지고, 마지막에는 다시 느려집니다. |
| ease-in | 전환(transition) 효과가 천천히 시작됩니다. |
| ease-out | 전환(transition) 효과가 천천히 끝납니다. |
| ease-in-out | 전환(transition) 효과가 천천히 시작되어, 천천히 끝납니다. |
| cubic-bezier(n,n,n,n) | 전환(transition) 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행됩니다. |
| step-start | steps(1, start)와 동일 시작과 동시에 효과 한번에 완료 |
| step-end | steps(1, end)와 동일 종료와 동시에 효과 한번에 완료 |
| steps(n, start|end) | n단계로 나누어 끊어서 완료 start/end가 없으면 end |
[ animation-fill-mode ]
애니메이션이 진행하지 않을 때 시작과 종류 후 어떤 상태를 유지할지 지정
animation-fill-mode: none | forwards | backwards | both | initial | inherit;
[ animation-play-state ]
animation-play-state: running | paused | initial | inherit;
animation-play-state: running; : play
animation-play-state: paused; : stop
복합설정 샘플
animation: myname 1s ease-in Infinite Alternate;
animation: myname 2s linear 2s 4 alternate none running;
animation-name: none;
animation-duration: 0s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
톱니바퀴 무한반복 회전 (이미지 무한회전)
<img class="gear" alt="spin gear" src="/res/to.png">
.gear {
width: 50px;
height: 50px;
animation: gear 5s infinite linear;
}
.gear:hover {
/* animation-play-state: paused; */ << 정지하고 싶을때
animation: gear 1s infinite linear; << 회전을 더 빨리하고 싶을때
}
@keyframes gear {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}