[CSS] Transition&Transform(+의사클래스/@keyframs)

Transition

css의 속성 값이 변화할 때, 속성 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것이다.(animation 효과와 같다)

transition은 state가 없는 기본 element에 붙여야 한다.(아래의 코드 참고)

#login-form button{
color: white;
transition: color 0.2s ease-in-out; (o)
}

#login-form button:hover{
transition: color 0.2s ease-in-out; (x)
} 

transition은 자동으로 발생하지 않는다. 즉, :hover와 같은 의사 클래스(가상 클래스)에 의해 발동한다.(아래의 코드 참고)

#login-form button{
color: white;
transition: color 0.2s ease-in-out; 
}

#login-form button:hover{
color: blue;
} 
-> button이 hover 될 때, transition이 발동하여
   0.2초동안 color값이 white에서 blue로 변화한다.

의사 클래스(가상 클래스)

선택자(css 규칙을 적용할 element)에 추가하는 키워드로, 선택한 element가 특별한 상태여야 만족된다.

ex) : hover, : active, : focus, : nth-child()

---

Transform

element에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.(3d animation 효과와 같다)

property

• translate : element를 각각 x축과 y축으로 지정한 값만큼 이동시킨다.
  (단위 : px, %)
• scale : element를 x축과 y축으로 지정한 값만큼 크기를 변경한다.
  (단위 : 배수)
• rotate : element를 지정한 값만큼 회전시킨다.
  (단위 : deg(각도))
• skew : element를 x축과 y축으로 지정한 값만큼 왜곡시킨다.
  (단위 : deg(각도))

---

@keyframes

state가 있는 특수한 상황이 아닌 일반적 상황에서 움직이는 애니메이션을 만들고 싶을 때, 사용한다.(아래 코드 참고)

@keyframes 애니메이션이름 { from{} to{} } 입력 후,
애니메이션이 생겼으면 하는 element에
animation: 애니메이션이름 시간 효과 를 넣어준다.

@keyframes study {
from { transform: rotateX(0);}
to { transform: rotateX(360deg);}
}

img {
animation: study 5s ease-in-out infinite; }
-> 여기서 infinte는 연속재생을 의미
-> 애니메이션을 마지막 상태에서 멈추고 싶을 때,
   animation: 항목에 forwards를 추가한다.