[@keyframes/CSS3] animation ease linear steps 값의 차이

 

 

animation-timing-function: linear; 를 사용하면 끊김없이 자연스럽게 계속해서 돌아간다 

무한으로 자연스럽게 360도 회전하는 애니메이션 구현할 수 있다.

 

 

animation-timing-function값은 아래와 같이 설정할 수 있고, 다음의 결과도 아래에서 확인 가능하다. 

            /* 진행되는 동안의 속도에 관한 설정 기본값 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초에 순간적으로 변화 
            */

 

 

 

각각의 div를 클릭해 애니메이션 결과를 확인하세요.