[CSS] 애니메이션

Transform

 

transform: sclae(n,m)

width 값을 n배, height 값을 m배 확대

소숫점 : 작게 하기 

---

transform: rotate(n deg);

입력한 각도만큼 (평면적으로)회전

양수/음수 모두 작성 가능

---

transform: skew (ndeg, mdeg);

x축, y축을 입체적으로(3차원적으로) 각도를 비틀 때 사용

n=x축 / m=y축

---

transform: translate( npx, mpx);

선택한 오브텍트의 좌표를 변경

원래 위치를 기준으로 이동한다.

n=x축 / m=y축

마진 패딩 ...

---

prefix 접두사 

 

transform이 css의 최신 언어라서 explorer하위버전에서는 사용 못하는데, 프리픽스를 사용하면 각 브라우저의 하위버전도 사용할 수 있음. (다른 브라우저에서 사용하려고 하면 이걸 쓴다.)

접두사를 달고 있는 transform과 달지 않는 것을 같이 써둬야 한다.

 

-webkt- / 크롬 사파리

-moz-  / 파이어폭스

-mos- /익스플로러 9.0이상부터 가능

-o- / 오페라

 

---

Transition

(마우스를 옮겼을 때) 변화하는 과정 자체가 드러나는 자연스러운 효과 변화를 쓸 때. 

 

Transition-property: 

어떤 속성이 바뀌는 것을 보여주고 싶은가?

효과를 적용하고자 하는 css속성

 

Transition-duration:

어느정도 시간을 소요해서 할 것인가?

효과가 나타나는데 걸리는 시간

 

Transition-timing-function:

효과의 속도 (다양하게...규정할 때)

linear는 일정하게 라는 의미

 

Transition-delay:

특정 조건 하에서 효과 발동

ex)마우스를 올렸을때 약간의 딜레이를 주고 효과가 바뀌고 싶다. 

 

* + *

가상 선택자 :hover

.transiton: hover { 속성: 속성값; }

선택자( 태그/아이디/클래스 - 기존에 이미 존재하거나 임의로 작성한 값들을 가지고 선택함.)

가상선택자는 css에서 미리 만들어놓은 종류. 

"마우스를 올렸을 때' 라는 조건:: css에서 미리 만들어 놓은 클래스.