CSS 애니메이션 - transition 속성 사용하기

 

transition - CSS 속성에 에니메이션 효과 위해 사용 : IE 10 이상 사용가능

 

 : 적용된 스타일을 대상으로 주어진 조건에 따라 상태를 변화시킴

 

 

1. 요렇게 속성별로 사용 가능

div {
    transition-property: width;        

/* none|all|css property(width, height 등)|initial|inherit */
    transition-duration: 2s;
    transition-timing-function: linear;

    /* ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|initial|inherit */
    transition-delay: 1s;
}

 

 

또는

2. 요렇게 한줄로 표현 가능

div {
    transition: width 2s linear 1s;    

    /* property duration timing-function delay 순서 */
}

 

 

 

자세한 설명은 요기에서...

 

transition 전체적인 설명 >>> http://www.w3schools.com/css/css3_transitions.asp

transition-timing-function 에 대한 자세한 설명 >>> http://kr-css3.tistory.com/4