[CSS/animation]애니메이션 마지막 상태 유지와 속성

애니메이션의 기본값은 반복이다

공부할 때 보다 작업하다가 알게되는 매직

역시 사람은 해봐야 학습이 되는구나..

딱 1회만 진행되게 하고싶을 때,

혹여나 자바스크립트로 제어해야하나 싶었는데

CSS animation 속성에 제어할 수 있는 방법이 있었다.

 

짜란

 

animation-fill-mode

이 속성으로 애니메이션을 제어할 수 있다!

옵션은 아래와 같다

animatiln-fill-mode:backwards; /* 애니메이션 처음 상태의 css를 유지함*/
animatiln-fill-mode:forwards; /* 애니메이션 마지막 상태의 css를 유지함*/
animatiln-fill-mode:both; /* 처음+마지막 둘다 css를 유지함*/
animatiln-fill-mode:none; /* 무한 반복 default */

 

내가 원하던건 forwards.. !!

그 외에 자세한 속성들은

 

animation-name: rgy; /* 애니메이션 이름 */ 
animation-duration: 5s; /* 재생 시간 (실행속도) */ 
animation-timing-function: ease-in; /* 속도곡선타입 */
animation-delay: 1s; /* 딜레이 시간 */ 
animation-iteration-count: infinite; /* 반복 횟수 */ 
animation-direction: alternate; /* 진행 방향 */ 
animation-fill-mode: forwards; /* 종료 후 위치 */ 
animation-play-state: paused; /* 실행 또는 정지 */

속성 익혀서 잘 써보자

인라인으로 사용하게되면

 

name > duration > timing-function > delay > count > direction > fill-mode > play-state

로 사용하면 된다!

예를 들면 아래처럼

animation: stack 5s ease-in 1s infinite alternate forwards paused;