CSS - transition 애니메이션

트랜지션은 CSS 의 값이 변할 때 값의 변화를 동적으로 진행시켜 애니메이션 효과를 낼 수 있습니다.

이 때 전환을 유발하는 CSS 프로퍼티를 전환프로퍼티라 부르며 1회만 이루어집니다. 반복 작업이 필요하다면 @keyframes 를 이용해야 합니다.

선택자 {
  transition-property: CSS프로퍼티
  transition-duration: 시간
}

선택자 {
  CSS프로퍼티: 값
}

속 성	설 명
transition-duration	전환이 완료되는 데 걸리는 시간. 초(s) | 밀리 초(ms) 중 하나
transition-property	대상 CSS 속성의 이름 여기에 작성된 속성만 트랜지션하는 동안 동작합니다.
transition-timing-function	전환 속도를 지정 linear: 시작부터 끝까지 동일한 속도를 유지 ease: 처음 느리게 시작해서 속도가 점점 빨라지다가 마지막에 다시 느려짐. 기본값 ease-in: 처음 시작할 때 느리게 시작함 ease-out: 마지막에만 속도가 느려짐 ease-in-out: 처음 시작할 때와 마지막에만 속도가 느려짐
transition-delay	전환을 시작하기 전 대기시간을 지정 초(s) | 밀리 초(ms) 중 하나
transition	위 속성을 한번에 지정 duration CSSproperty timing-function delay 순서 Ex.) 3s background-color linear 1s

transition-property

전환 효과를 내고 싶은 transition 프로퍼티 값에 대상 CSS프로퍼티 이름을 추가해 주면 전환이 진행됩니다. 아래는 사용자가 버튼에 마우스를 올렸을 때 배경색이 변합니다.

<style>
.mbtn01 {
  background-color: yellow;
  color: #111;

  -webkit-transition: background-color: 2s;
  transition: background-color 2s;
}
.mbtn01:hover {
  background-color: green;
  color: white;
}
</style>

<button class="mbtn01">트랜지션</button>

다음은 마우스를 올리면 폰트 크기에 전환 효과가 진행됩니다.

<style>
.mbtn02 {
  -webkit-transition: font-size 2s;
  transition: font-size 2s;
}

.mbtn02:hover {
  font-size: 200%
}
</style>

<button class="mbtn02">안녕 하보니!</button>

transition-timing-function

요소의 전환 속도를 제어할 수 있는 속성입니다.

<style>
#box button {
  width: 100px;
  height: 100px;
  background: #99cc99;
  -webkit-transition: width 3s;
  transition: width 3s;
}
#box .button1 {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
#box .button1 {
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
#box .button1 {
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
}
#box .button1 {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#box .button1 {
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}

#box button:hover {
  width: 100%;
}
</style>

<div id="box">
  <button class="button1">linear</button><br>
  <button class="button2">ease</button><br>
  <button class="button3">ease-in</button><br>
  <button class="button4">ease-out</button><br>
  <button class="button5">ease-in-out</button>
</div>

transition-delay

전환 효과을 시작하기 전에 몇 초간 지연을 시킵니다. 예제는 1초 지연 뒤에 전환을 진행합니다.

<style>
.mbtn03 {
  width: 100px;
  height: 100px;
  background: #99cc99;
  -webkit-transition: width 1s;
  transition: width 1s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}
.mbtn03:hover {
  width: 200px;
  background-color: yellow;
}
</style>

<button class="mbtn03">Delay</button>

transition 다수 지정

transition 프로퍼티는 콤마로 여러 개 구분하여 다수 지정할 수 있습니다.

<style>
.mbtn04 {
  width: 100px;
  height: 100px;
  background: green;
  -webkit-transition: width 1s, height 2s, background-color 2s;
  transition: width 1s, height 2s, background-color 2s;
}
.mbtn04:hover {
  width: 300px;
  height: 200px;
  background-color: yellow;
}
</style>

<button class="mbtn04">안녕 하보니!</button>

<style>
.mbtn05 {
  width: 200px;
  height: 200px;
  background: yellow;
  -webkit-transition: background-color 2s, -webkit-transform 5s;
  transition: background-color 2s, transform 5s;
}
.mbtn05:hover {
  -webkit-transform: skew(40deg, 40deg);
  transform: skew(40deg, 40deg);
  background: #99cc99;
}
</style>

<button class="mbtn05">안녕 하보니!</button>