[D+48] Animation 복습

 

 

국비지원 D+48

-  Animation 복습 -

 

---

 

Animation 복습

• 애니메이션 기능 구현

- 지속적으로 CSS갑승ㄹ 바꾸어 적용하는 기법

ex) 지속적으로 opacity 값을 바꿈 → fade-in, fade-out

     점점나타남 : fade-out

     점점사라짐 : fade-in

 

• 애니메이션의 구현

- CSS의 값의 범위 : 시작값, 종료값

ex) 0, 0.1, 0.2, ~, 1.0

 

- 기준값의 범위 : 시간, 스크롤값

     * CSS값과 기준값은 독립적이기 때문에 기준값을 그대로 CSS값으로 적용할 수는 없다.

     * 기준값에 따라 CSS값을 적용하기 위해 기준값의 "비율"을 구한 뒤 그 비율에 따라 CSS값을 반영한다.

 

rate = value / totalvalue = 현재값 / 기준

CSS값 = ((value2 - value1) * rate) + value1