[D+47] CSS Animation 개념

 

 

국비지원 D+47

-  CSS Animation 개념 -

 

---

 

CSS Animation 개념

• Animation이란?

- CSS에서의 애니메이션은 어떤 값을 연속적으로 바꾸는 것을 의미하며, 정해진 범위 내에서 얼마만큼 값이 적용되는지를 나타낸다.

- 이때, 애니메이션을 적용할때에는 범위가 필요하는데 범위값을 절대값으로 설정했을 경우에 해상도가 다른 곳에서 애니메이션을 동작했을 때 다른 결과값이 나올 수 있기 때문에 비율로 계산해서 애니메이션을 적용해야 한다.

 

• Animation 구하기

- STEP01 ) 비율을 구하기

비율(rate) = 현재값(value) / 기준(totalValue)

특정영역에 대한 절대값을 구하게 되면 다른 해상도를 가진 모니터에서는 다른 결과값을 가질 수 있기 때문에 우리는 화면에 대한 특정 비율영역에서만 애니메이션이 돌아가도록 설정해주고, 추구 화면에 해상도가 결정되었을 때 절대값을 구할 수 있도록 해준다.

 

- STEP02 ) 비율에 따른 적용값 구하기

CSS 적용 값 = ((범위 끝값 - 범위 첫값) * 비율) + 범위 시작 값

비율값을 구한 다음 각 화면 해상도에 따른 적용값을 구해서 CSS값에 실제로 적용하면 된다.