HTML/CSS - transition

안녕하세요, 오늘은 transition에 대해 공부해보겠습니다.

 

transition은 CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션 해주는 것입니다. 단축 속성으로 transition-properey, transition-duration, transition-timing-function, transition-delay가 있습니다.

 

◆ transition

-. transition-property : 전환 효과를 사용할 속성 이름 (기본값 : all)

-. transition-duration : 전환 효과의 지속시간 (기본값 : 0초)

-. transition-timing-function : 타이밍 함수 지정

-. transition-delay : 전환 효과의 대기시간 설정 (기본값 : 0초)

 

예를 들어 :hover를 사용한다고 가정한다면, transition 속성은 초기 상태(바뀌기 전)에 적용해주면 됩니다. 코드를 통해 설명드리겠습니다. (화면은 올릴 수가 없어 양해 부탁드립니다/ 확인하고 싶으시다면 JSFiddle 같은 곳에 붙여 넣어 실행을 한번 해보셔도 될 것 같습니다.)

<!-- HTML -->
<div class="box"></div>

<!-- CSS -->
.box {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
/* 단축속성(transition)으로 한번에 표현 가능  
  transition-property: width background;
  transition-duration: 1s; */
  transition: width 1s, background 1s;
}

.box:hover {
  width: 300px;
  background: yellow;
}

위와 같이 초기상태인 .box에 transition 효과를 적용해야 합니다. transition-property를 통해 어떤 속성에 transition 효과를 적용할지 설정해주며(width와 background에 적용하겠다!), transition-duration을 통해 전환되는데 걸리는 시간을 설정해 주었습니다. 위에서 설명드렸듯이 transition은 단축 속성이기에 transition-property와 transition-duration을 한 번에 표현이 가능합니다! (transition : width 1s, background 1s;) 이것을 더 간단히 하기위해 transition-property에 대해 좀 더 자세히 알아보겠습니다. transition-property의 기본값은 all이므로 transition : width 1s, background 1s;에서 width와 background를 안 적어줘도 전체가 적용되기 때문에 동일한 효과를 낼 수 있습니다. 추가로 시간도 동일한 1s이기 때문에 transition :1s;라고 적용해도 동일한 효과를 냅니다! 만약 transition : width 1s;나 transition : background 1s;를 적용하면 나머지 속성은 timing-duration이 1초가 아닌 기본값(0초)이 되어 바로 바뀌게 됩니다. 

 

다음으로 transition-timing-function속성은 전환이 되는 속도를 조절해주는 역할을 합니다. 예를 들어 :hover를 사용하여 마우스를 요소 위에 가져갔을때, 전환이 시작되는 시간을 빠르게 할지 전환이 끝나는 쪽의 시간을 빠르게 할지 아니면 전환되는 시작부터 끝까지 속도를 일정하게 유지할지를 설정할 수 있습니다. 나머지 속성 하나인 transition-delay는 delay라는 단어에서 짐작을 할 수 있듯 전화효과가 적용되기 전의 대기 시간을 설정할 수 있습니다. transition-timing-function과 transition-delay는 사용빈도가 높진 않으므로 깊게는 정리하지 않고 이 정도만 정리하겠습니다!