[CSS]transition을 이용한 animation 구현

 

 

transition-property : 트랜지션을 적용할 속성 나열 ,로 구분

transition-duration : 트랜지션 효과 지속시간

transition-timing-function : 트랜지션 효과 타이밍

transition-delay : 트랜지션 지연시간 (지정된 시간 이후 효과나타남)

 

transition : property duration timing-functio delay 순으로 값 지정

 

transition: 
background 0.5s linear 0.8s, 
    /* background 속성이 변할때는  0.8s 지연 후 0.5초동안 linear로 변한다. */
padding 1s ease 2s;
   /* padding 속성이 변할때는 2초 지연 후 1초동안 ease로 변한다. */

 

아래처럼 작성 할 수도 있다.

transition-property : background, padding;
transition-duration : 0.5s , 1s;
transition-timing-function : linear, ease;
transition-delay : 0.8s, 2s;

 

 

 

-참고-

 

2019/04/17 - [CSS] - [@keyframes/CSS3] animation ease linear steps 값의 차이

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