CSS _transition(1) (property, timing, delay)

저번에 css가상클래스 hover를 알아볼 때 잠시 다뤘던

transition에 대해서 좀 더 공부해보았다.

 

transition = 변경 이다.

 

따라서 요소의 상태 변화를 다룰 수 있는데

 

transition은 단축 속성이고

property, duration, delay, timing-function

이렇게 4가지가 있다.

 

각각을 간단히 알아보면

1. property : 변화를 적용시킬 CSS 속성 지정

2. duration : 변화시간 지정

3. delay : 지연 시간 지정 (시간 지난 후 시작)

4. timing-function : 변화되는 과정 중 속도 지정

---

 property & duration 

div:hover {
	transition-property: width;
	transition-duration: 1s;
}

저번 포스트에서 다뤘던 것이 이 두 개의 속성이었다.

 

property는 기본 값이 속성 전체이다.

따라서 위와 같이 지정을 해주면 해당 속성에 대해서만

변경 효과를 적용할 수 있다.

 

 

이때 속성과 시간은 여러 개 그리고 따로 지정을 할 수 있다.

 

예시 1)

div {
    background: blueviolet;
    transition-property: width, background-color;
    transition-duration: 1s, 5s;
}

div:hover {
    width: 400px;
    background-color:white;
}

배속 버전이지만

width와 background-color의 변경 속도가

다른 것을 확실히 알 수 있다.

 

 

위처럼 여러 개의 속성을 주고 싶을 때에는

, (콤마)로 구분을 하면 된다.

 

 

예시 2)

div {
    background: blueviolet;
    transition-property: width, background-color;
    transition-duration: 1s;
}

위와 같이 duration에 한 개의 속성만 준 경우,

두 속성에 같은 변화 시간이 적용이 된다.

---

 delay 

지연시간을 다루는 속성에 대해서 알아보자

div {
    background: blueviolet;
    transition-property: width, height, opacity;
    transition-duration: 1s;
    transition-delay: 0s, 1s, 1s;
}

div:hover {
    width: 200px;
    height: 200px;
    opacity: 0.5;
}

지연 시간 역시 여러 속성에 따로 지정을 할 수 있고,

모두 동일 하게 적용하는 것도 가능하다.

 

 

timing-function은 다음 포스트에서 다뤘다!

(https://bluishhot-star.tistory.com/83)

 

 

출처 : MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/transition)