[애니메이션 효과 - css]CSS animation 옵션값 설정 방법

하나의 animation으로 설정할 때

.aniBox{
  /* 하나로 묶어서 작성할 때 */
  animation: name duration timing-function delay iteration-count direction fill-mode;
  /* animation: ani1 0.5s linear 1s 1 backwards;  */
}

 

각각의 옵션을 나누어서 설정할 때 

animation-name: ani1; 
 /* animation 이름 즉 @keyframes로 선언한 이름 */
 
animation-duration: 0.5s;
 /* animation이 진행될 시간 0.5s 동안 진행된 */
 
animation-timing-function: linear;
            /* 진행되는 동안의 속도에 관한 설정 기본값 ease 
            ease : 천천히 시작되고 속도가 줄어들면서 끝난다(속도차이 매우 미세)
            ease-in : 천천히 시작 / 평균속도 유지
            ease-out : 빠르게 시작/ 평균속도 유지 
            ease-in-out: 빠르게 시작되어 평균속도 유지 (속도차이큼)
            linear :   일정한 속도로 진행
            step-start : 시작하자마자 순간적으로 바뀜  
            step-end : 시작 유지되다가 끝날때 순간적으로 바뀜.
            steps(5, end or start) : 5번으로 나누어 끊어지듯 진행됨 
            예) 10초동안 진행되는 애니메이션이라면 
                steps(5,end) 일 경우 -> 2,4,6,8초에 순간적으로 변화
                steps(5,start) 일 경우 -> 0, 2,4,6,8초에 순간적으로 변화 
            */
            
animation-delay: 1s;
  /* 1초 지연후 시작  */

animation-iteration-count: 1;
  /* 반복횟수 - 숫자값 또는 무제한일 경우 infinite */
            /* animation-direction: ; 
            normal : 매 사이클마다 재설정되어 다시 시작 
            reverse : 매사이클 마다 역방향 재생 (이때 타이밍 기능도 반대로 수행됨) (역방향반복)
            alternate : 매사이클 마다 주기가 바뀜 (정방향-역방향-정방향-역방향 반복)
            alternate-reverse : 역방향-정방향-역방향 반복
            */

animation-fill-mode: both;
            /* animation이 시작되기 전 지연시간이나 animation 이 종료된 후 어떤 상태로 있을지 지정 
            none: 기본값 / animation이 실행되지 않으면 기본설정되어있는 css가 적용됨
            forwards : animation이 종료되고 그 값이 유지됨 
            backwords : animation이 delay되는 동안 처음 시작 값 적용됨
            both: 양방향으로 적용됨.
             */
}