CSS transitions options

 

이 글은 udemy의 강의 를 듣고 정리한 글 입니다.

CSS transitions options

CSS로 애니메이션을 표현할 때 필요한 transition은 지연시키는 의미입니다. 

버튼이 1프레임만에 색이 확확 바뀌면 너무 기계적이니 0.5초동안 천천히 바뀌도록 할 수 있죠.

 

transition의 프로퍼티는 아래와 같습니다.

프로퍼티	설명	기본값
transition-property	트랜지션의 대상이 되는 CSS 프로퍼티 지정	all
transition-duration	트랜지션이 일어나는 지속시간(duration)을 초 단위(s)또는 밀리 초 단위(ms)로 지정한다.	0s
transition-timing-funtion	트랜지션 효과를 위한 수치 함수를 지정한다.	ease
transtition-delay	프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s)또는 밀리 초 단위(ms)로 지정한다.	0s
transition	모든 트랜지션 프로퍼티를 한번에 지정한다.(shorthand syntax)

transition-property

대상의 프로퍼티 중 어떤 것이 변화할 지 지정하는 것입니다. 

예를 들어, background color, text color 등을 바꿀 수 있습니다. 그 뿐만 아니라 모든 CSS 속성을 변경할 수 있습니다.

 

CSS Animations and Transitions rely on the concept of animatable properties, and all CSS properties are animatable unless otherwise specified. 
CSS 애니메이션 및 전환은 애니메이션이 가능한 속성 개념에 의존하며, 달리 지정하지 않는 한 모든 CSS 속성은 애니메이션 가능합니다.
-mdn web docs-

---

transition duration

transition duration은 변화가 몇 초 동안 일어날 지에 대해 설정하는 것입니다.

 

---

transition timing function

transition timing function은 요소의 변화가 어떤 방식으로 변할 것인지 수치 함수를 설정하는 것입니다.

총 5가지 중에서 선택할 수 있습니다.

• ease(Default)
  • 천천히 시작해서 빨라지다 종료할 때 다시 느려짐
• linear
  • 일정한 속도로 변화
• ease-in
  • 느리게 시작했다가 점점 빨라짐
• ease-out
  • 빠르게 시작했다가 점점 느려짐
• ease-in-out
  • 천천히 시작해서 빨라지다 종료할 때 다시 느려짐

아래는 transition options를 체험할 수 있는 예시입니다. 

---

transition delay

transition이 일어나기 전에 딜레이를 줄 수 있는 옵션입니다. 

 

transition

모든 트랜지션 프로퍼티를 한번에 지정할 수 잇는 shorthand입니다. 값을 지정하지 않은 프로퍼티에는 기본 값이 지정됩니다.

 

transition: property duration function delay

 

#seperate {
  transition: background 1s ease 0s, color 1s ease 1s, border-radius 1s ease 2s;
}

#all {
  transition: all 1s ease 0s;
}

 

#seperate는 하나씩 transition이되고 #all은 한번에 transition이 되도록 하였습니다.

 

예제

 

 

See the Pen CSS transitions options by 정서희 (@LireEruel) on CodePen.