CSS Transition 설정

 

Transition

 두 상태(state)를 자연스럽게 이어지게 만들어주는 속성이다. 바로 property를 받아들이게 하지 않고 그 사이에 설정된 만큼의 딜레이를 주거나 해서 자연스럽게 이어지는 애니메이션을 부여하게 해준다. 기본 문법은 다음과 같다. 

 

• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

transition은 shorthand property로 위에 네가지 property를 한 줄로 표현할 수 있다. 그렇게 했을 때의 문법은 다음과 같다. 

 

transition : propertyname(색깔, 배경 등등) duration(지속시간 단위는 s) transition-timing-function(ease in 등 어떤 방식으로 중간 요소를 표현할 지) delay(지연시간, 어느 정도 이후 기다리다가 효과를 발동시킬지) 

 

div {
  transition: <property> <duration> <timing-function> <delay>;
}

이런식으로 요약할 수 있겠다.

 

 두개 이상의 property를 한 번에 적용하려면 comma를 이용해 구분하면 된다. 

  transition: width 2s, height 4s;

 

각각의 구성요소들은 원래 각기 따로 쓸 수 있는 property이다. 간단하게 표현하기 위해 short hand property(축약형)인 transition만을 적어놨다. 

 

transition timing function을 보다 세부적으로 조절하는 단어들은 다음과 같다. 

 

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default) 
  
  •  기본값으로 ease가 설정되어 있다. 느리게 빠르게 느리게로 설정되어있다. 
• linear - specifies a transition effect with the same speed from start to end
  • 처음부터 끝까지의 변화속도가 균일하게 
• ease-in - specifies a transition effect with a slow start
  • 첫 시작을 느리게
• ease-out - specifies a transition effect with a slow end
  • 끝을 느리게
• ease-in-out - specifies a transition effect with a slow start and end
  • 처음과 끝을 다 느리게
• cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
  • cubic bezier라고 부르는 곡선을 만듦(이부분은 공부 필요해보임) 

 

transition + transform

 transform 이라고 하는 property는 각도 등을 변수로 받아서, 도형의 위치나 모습등을 변화시킨다. 

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 5s;

}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

 

이런식으로 쓰일 수 있다.  5초의 duration time을 가지면서 붉은색 사각형이 우로 180도 돌아가는 모습이다. 

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_transform 

W3Schools online HTML editor

 

참고할만한 링크

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

Using CSS transitions - CSS: Cascading Style Sheets | MDN

https://www.w3schools.com/css/css3_transitions.asp

CSS Transitions

 

https://easings.net/

Easing Functions Cheat Sheet