css animation

animation 적용법

<style>
animation-name: move1; /* 애니메이션 이름 */
animation-duration: 1s;/* 진행 시간 */
animation-delay: 1s; /* 대기 시간 */
animation-timing-function: ease-out; /* 움직임 형태 */

animation-iteration-count: infinite; /* 무한 반복 */
animation-iteration-count: 4; /* 반복 횟수를 숫자로 작성 */

animation-direction: normal; /* 진행 방향. 기본값 from -> to */
animation-direction: reverse; /* to -> from */

animation-direction: alternate; /* 순방향 진행 후 역방향 진행 1>2>3>3>2>1 */
animation-direction: alternate-reverse; /* 역방향 진행 후 순방향 진행 3>2>1>1>2>3 */

animation-fill-mode: backwards; /* 기본값. 끝난 후 출발점으로 돌아옴 */
animation-fill-mode: forwards; /* 움직임이 끝난 후 도착점에 그대로 있음 */

축약형 작성법 ex) 순서에 상관없이 작성, 두 번째 나오는 s(초)는 대기시간으로 생략 가능
animation: move1 2s .5s forwards cubic-bezier(.27,-0.32,.84,1.25) 3 alternate;
</style>

keyframe 작성법

ex)
<style>
@keyframes move1{ /* 내가 지정하는 애니메이션 이름 */
from{ /* 움직임의 시작 */
width:100px; backgroud-color: #000;} 
to{ /* 움직임의 끝 */
width:200px; backgroud-color: #999;} 
}

@keyframes move1{ /* 내가 지정하는 애니메이션 이름 */
0%{ /* 움직임의 시작 */
width:100px; backgroud-color: #000;} 
100%{ /* 움직임의 끝 */
width:200px; backgroud-color: #999;} 
}
</style>

요소:hover 할 때 애니메이션을 멈추는법

<style>
animation-play-state: paused;
</style>