css) transition

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

transition

요소의 변화를 일정 시간동안 일어나게 한다.

hover와 같은 트리거에 의하여 작동된다.

 

transition-property, transition-duration

속성이 변경될때 애니메이션의 속도를 조절한다.

예를들어 hover pseudo class로 색상을 빨강에서 파랑색으로 바꾼다면

마우스를 올렸을때 즉시 빨강에서 파랑이 되는 대신에 

설정한 시간에 걸쳐서 색상이 변경되도록 할수있다.

 

index.html

위 코드를보면 hover pseudo class로 각각의 색상박스들에 마우스를 올리면 coral 색으로 변경되도록 하고 있다.

세번째 박스는 transition-property, transition-duration 으로 2초에 걸쳐서 blue에서 coral로 변경된다. 

 

---

transition-property와 transition-duration은 다음과 같이 여러값을 나열해 놓을수 있다.

 

background는 4초에 걸쳐서, 

border-radius는 2초에 걸쳐서 변경된다.

 

 

---

transition-delay

속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의한다.

예를들어 hover의 경우 transition-delay를 2초로 정의한다면 마우스를 요소에 올리고 2초 후에 변화하기 시작한다.

 

---

간단한 표현

property, duration, delay를 일일히 나열하지 않고 한줄로 끝낼수있다.

 

모든 property들이 같은 duration과 delay값을 갖는다면 all 키워드로 더 간단하게 쓸수있다.

---

 

transition timing function

 

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

transition-timing-function - CSS: Cascading Style Sheets | MDN

ease

• default 값
• slow start, fast, slow end

 

linear

• same speed start to end

 

ease-in

• slow start

 

ease-out

• slow end

 

ease-in-out

• slow start, fast, slow end