CSS / Transition, Transform, Animation, Media Query

1. Transition

Transition은 state(hover, active, focus, visited)에 따라 속성들이 시간을 두고 변화할 수 있게 해주는 것이다.

 

.box:hover을 background-color: white로 주되,

.box에서 transition을 적용하여 5s ease-in-out option을 적용하였다.

box에 마우스를 올리면, 검은 색이였던 box가 5초동안 점점 하얗게 되면서 검은색 글자 '까꿍'이 나타나게 된다.

 

 

 

단순 ease-in-out 말고 다른 option들은 아래 링크에서 참조해볼 수 있다.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition

margin을 바꾼다거나, color와 background-color를 동시에 바꾼다거나(all) 등을 적용할 수 있음을 animation으로 확인 가능하다.

 

 

---

 

2. Transform

transform은 element의 크기, 각도, 형태 등을 변환할 수 있는 기능이다.

 

아래와 같이 .box:hover 부분에 transfrom 부분을 작성해주고, 기존 .box에 transition이 있는 부분에 transform을 추가해주면 된다.

0.5초 안에 box의 색깔이 검은색에서 빨간색으로 바뀌고, box가 1바퀴를 회전하게 된다.

 

 

---

 

 

3. Animation

transformation, transition은 states와 연동되어 사용자의 행동과 관련해서만 반응한다면,

animation은 사용자의 행동에 상관없이도 화면에 변화를 줄 수 있는 tool 이다.

 

 

 

Syntax

class 내부 - animation : 재생시간 keyframe이름 효과;

class 외부 -

@keyframes keyframe이름{

from{}

to{}

}

→ from - to 문법 대신 %로 대체할 수 있다. ex) 0%{} 50%{} 100%{}

 

-transform을 적용하지 않은 상태는 transfrom:none; 으로 지정하여 animation의 각 상태들을 조율하면 된다.

-계속 반복 재생을 하기 위해서는 animation의 property를 작성하는 쪽에 'infinite'라고 작성해주면 된다.