[CSS] Transition

Transition

• CSS 프로퍼티 값이 자연스럽게 변화하도록 하는 것

📍transition 관련 속성들

• transition-property : 필수 속성 / 전환하고자 하는 property 지정하는 속성
• transition-duration : 필수 속성 / 변화 지속시간 지정하는 속성 (단위 : ms, s)
• transition-timing-function : 선택 속성 / 변화 속도 지정하는 속성
• transition-delay : 선택 속성 / 변화가 시작되기 전에 대기하는 시간을 지정하는 속성 (단위 : ms, s)
  
  

---

📍 property, duration

.box{
  background-color: tomato;
  font-size: 20px;
  transition: font-size 2500ms
}

.box.active{
  font-size: 30px;
}

transition의 property를 all로 지정하면 모든 속성들이 같이 변화한다.

---

📍 timing-function

• ease-in : 천천히 시작하여 빠르게 바뀐다.

.box{
  transition: all 2500ms ease-in
}

• ease-out : 빠르게 시작하여 천천히 끝난다.
• ease-in-out : 천천히 시작하여 중간에서 가속도를 얻고 천천히 끝난다.
• cubic-bezier() : 사용자 정의 타이밍 함수로, 변화의 가속도를 직접 제어한다. (링크)

.box{
  transition: all 2500ms cubic-bezier(0.08, 0.57, 0.97, -0.78);
}

---

📍 delay

transition: all 2500ms ease-in 1000ms

• 전환 효과가 1초 뒤에 실행된다.
  
  

✔️ 각 속성마다 다른 transition을 지정하고 싶을 때 property마다 개별적으로 transition 선언하기!

transition: font-size 1000ms ease-out, background-color 2000ms ease-in 1000ms;

---

📍 실습

• body에 font-family를 적용해도 form 관련 요소들은 적용되지 않는 문제 발생해서 따로 지정해줬다.

button,
input,
textarea{
  font-family: 'Lato', sans-serif;
}

• 가상요소 사용하여 버튼 아래의 막대 생성

.line-button::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #0066FF;
}

• 버튼에 마우스 올렸을 때의 막대 transform 적용하기 (배경색, 막대 길이 변경)

/* 버튼 아래에 막대 생성하기 */
.line-button::after{
  transition: width 250ms ease-in, background-color 250ms ease-in;
}

.line-button:hover::after{
  width: 100%;
  background-color: hotpink;
}

---

참고 사이트

• 2.6 CSS3 Background