css animation 값 유동적으로 적용

.bar {

 background:pink; // 기본색상

 animation: example 5s ;

}

 

@keyframes example {

 from {background-color: blue;}

 to {}  // 비워둠

}

 

- to 비워두면 inline으로 선언한 요소나 기본 선언된 속성(pink)가 먹힘! 꿀팁

 

ex)

프로그래스바 수치를 inline으로 적용, 퍼센테이지에 모션을 줘야 할때.

animation form width값이 0 부터 시작해서 inline으로 html에 넣어준 40%로 끝난다!

 

<span class="bar" style="width:40%">

.bar {

 animation: example 5s ;

}

@keyframes example {

 from {width:0;}

 to {}

}