간단 설명
transition은 animation의 속성보다는 제한적인 기능을 가지고 있습니다.
따라서 간단한 인스턴트 적인 동작을 구현하는 용도로 적합합니다.
transition에 loop 기능은 없습니다.
transition은 페이지가 로드되면서 자동으로 시작되지 않습니다.
반드시 click, hover, focus등의 이벤트가 발생해야만 작동됩니다.

Transition 미적용/적용 예제

왼쪽 미적용 / 오른쪽 적용( transition: all .5s ease; )

  • .box {

    transition: all .5s ease;

    }

    .box:hover {

    width: 0px;

    height: 0px;

    background-color: 0;

    border-radius: 0;

    }

  • transition이 선언되면(오른쪽) 해당 엘리먼트가 의도된 형태로 변화하는 과정이 보여진다.
  • 반대로 선언되지 않으면(기본/왼쪽) 변화하는 과정 없이 결과만 보여준다.

속성 설명 및 작성 방법

Transition은 다른 css처럼(ex, border or background) 축약 또는 속성별로 나눠서 작성 할 수 있습니다.

Transition 속성 설명

  • 속성
  • 값

  • transition-property

    transition 효과를 적용할 속성들을 나열, 2개 이상일 경우는 쉼표(,)로 구분합니다.
    css의 모든 속성에 적용(all)할 경우 생략 가능합니다. 값 : all 또는 width, height, transform등의 css 속성

  • transition-duration
    (필수 선언)

    transition 효과의 지속 시간 표기.
    1s는 1초이며, 0.1s는 숫자 0를 생략하고 .1s로 표기 가능합니다.
    (ms의 단위로 할 경우 1초 = 1000ms) 값 : #s or #ms

  • transition-timing-function

    변화의 시작과 끝 타이밍을 정의하며, 조금 더 정교한 또는 현실적인 움직임을 표현하기 위해 사용됩니다.
    기본값은 ease이며 기본값으로 사용할 경우 생략 가능합니다. 값 : ease, linear, ease-in, ease-out, ease-in-out, step(n), cubic-bezier(n,n,n,n)
    움직임 보기 :
    • ease : 느리게 시작하여 점점 빨라졌다가 느리게 끝납니다.
    • linear : 모든 속도가 같은 등속 운동
    • ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동
    • ease-out : 일정한 속도의 등속으로 시작해서 점점 느려지면서 끝납니다.
    • ease-in-out : ease와 비슷하다. 느리게 시작하여 느리게 끝납니다.
    • steps(n) : 애니메이션의 흐름을 Step(단계)화해서 제어할 수 있습니다.

      아래 5. Steps 선언에서 자세히 다룹니다.

      아래 5. Steps 선언에서 자세히 다룹니다.

    • cubic-bezier(n,n,n,n) : 처음과 끝의 속도를 0과 1 사이의 수치를 이용하여 4단계로 지정할 수 있다. 베지어(Bezier)라는 곡선 운동을 정의합니다.
      https://easings.net/
      위 사이트에서 미리 만들어져있는 cubic-bezier 값을 가져다 쓰면 좋습니다.
      https://cubic-bezier.com/
      위 사이트에서는 cubic-bezier의 움직임을 직접 만들 수 있습니다.

  • transition-delay

    효과의 지연시간을 정의.
    3s(3초)로 설정하면 이벤트 발생 3초 후에 transition이 작동된다.
    지연시간이 필요 없으면 생략 가능하다. 값 : #s or #ms

작성 방법 최대 단축형과 확장 단축형이 주로 쓰입니다.

1. 최대 단축형

.box { transition:
all

property css 속성

.5s

duration 지속시간

ease

timing 타이밍

2s

delay 지연시간

}
  • 변경할 속성이 한 개 또는 모든 css속성일 경우에만 사용됩니다. (주로 property가 all일 경우에 많이 쓰입니다.)
  • 모든 css속성(property)에 적용하고, 기본 타이밍(ease)을 사용하고, 지연시간(delay)이 없을 경우
    [ transition:.5s; ] 이렇게 지속시간(duration)만 선언하여 사용 가능합니다.

2. 확장 단축형

.box {

transition:

transform .5s ease .2s

,

color .3s linear 1s

;

}

변경할 속성이 두 개 이상일 때 사용되며, 각 속성별로 독립적인 움직임을 줄 수 있습니다.

3. 기본형

.box {
transition-property: transform, color, border;
transition-duration: .5s;
transition-timing-function: ease;
transition-delay: .2s;
}
  • transition의 속성을 분리해서 정의할 수 있습니다.
  • code가 길어지는 단점이 있지만, 전체 속성(all) 대신 꼭 필요한 속성만 사용할 수 있습니다.

4. 대입형

.box {
transition-property: transform, color, border;
transition-duration: .5s, .3s, .25s;
transition-timing-function: ease, linear, linear;
transition-delay: .2s, 1s, 0s;
}
transition-property에 나열된 순서대로 다른 transitiondml 속성이 대입 적용됩니다.
(3개 이상부터는 관리가 어려운 개인적인 판단에 이 방법은 추천하지 않습니다.)

5. Steps 선언

애니메이션의 흐름을 Step(단계)화해서 제어할 수 있습니다.
duration 값과 연계해서 선언하여 일종의 Frame Rate(초당 프레임 수)를 설정하거나 혹은, 셀 애니메이션처럼 연계된 동작을 표현할 수도 있습니다.
아래 예제 박스에 마우스를 올리거나 Result버튼을 클릭하면 확인할 수 있습니다.

[미적용]
.box {
transition: all 1s ease;
}
.box
[적용]
.box {
transition: all 1s steps(10);
}
.box