[CSS] Transition 정리

CSS 트랜지션(transition) 관련 정리

미리보기

• transition-property: 트랜지션이 적용되야하는 속성(all: 전체, none: 없음)
• transition-duration: 트랜지션이 일어나는 지속시간.
• transition-timing-function:
  • ease: 중간까지 점점 빨랐다가 다시 느려짐
  • linear: 일정한 속도
  • ease-in: 점점 빨라짐
  • ease-out: 점점 느려짐
  • ease-in-out: ease랑 비슷, 빨라졌다가 느려지면서 종료
• transition-delay: 트랜지션이 시작되기까지 대기시간
• transition: <property> <duration> <timing-function> <delay>

CSS 트랜지션

CSS 트랜지션은 css 속성이 변경될때,

어떤 속성에(transition-property),

얼마만큼의 지연시간 후에(transition-duration),

얼마의 시간 동안(transition-delay),

어떠한 빠르기로(transition-timing-function)

해당 변화의 애니메이션이 적용되어야 하는지를 정의한다.

말은 어렵지만, 예를 들면 아래와 같은 작은 네모 박스가

네모박스

아래와 같이 변할때, 어떻게 변할거냐? 하는 것이다.

네모박스

이제부터 하나씩 관련 속성을 살펴보겠다.

transition-duration

얼마의 시간 동안 변화할거냐 라는 것이다.

 transition-duration: 500ms

이런 식으로 해당 프로퍼티에 시간속성을 지정해서 사용한다.

위의 네모박스 CSS 속성을 정의해보자

css

 .box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    margin: 12px;
    background-color: #fee2e2;    
}

.box--to {
    color: #ef4444;
    width: 150px;
    height: 100px;
    background-color: #84cc16;

    /* transition property */
    transition-duration: 500ms;
}

.box-to 에 transition-duration: 500ms를 추가했고. 0.5초 동안 box-to로의 트랜지션이 일어난다는 의미를 갖는다.

html

<div class="box" data-target="prac01">
네모박스
</div>

box 클래스를 갖고 있는 div를 선언했다. 이 div에 box-to 클래스를 추가하여 변화를 볼 것이다.
data-taget="prac01"은 javascript로 해당 element를 가져오고 box-to 클래스 추가를 위한 속성이다. 여기에서는 javascript는 다루지 않을 예정.

위의 코드를 구현하면 아래와 같은 네모 박스가 생길것이고,

네모박스

아래의 버튼을 눌러서 javascript로 box--to 클래스가 추가되면 어떻게 변화하는지 확인해보자.

0.5초간 네모 박스가 빠르게 변화하는 것을 확인할 수 있다.
원한다면 시간을 늘릴수도 줄일수도 있다.

.box--to 클래스 시간을 바꿔보자.

transition-duration: 3.0s;

그리고 아래 버튼을 누르고 위의 박스를 잘 보면

CSS 속성 적용에 따라 버튼이 바뀌는 속도가 확연히 다르다는 것을 알 수 있다.

transition-delay

얼마의 시간 후에 변화 할 것인가 를 담당하는 CSS 프로퍼티이다.

css

transition-delay: 1s

위와 같은 형태로 CSS에 추가 할 수 있다.

1초 딜레이인 네모 박스를 생성해보자

css

.box--delay-1s {
    transition-delay: 1s;
}

box--delay-1s로 delay가 1초인 css 클래스를 선언했다.

html

<div class="box box--delay-1s" data-target="prac03">
    네모박스
</div>

이제 네모박스 div에 box 클래스와 1초 딜레이를 위한 box--delay-1s 추가했다.
이것을 구현하면 다시 아래 박스 처럼 될 것이고 위에서 만들었던 box--to 클래스를 추가해보자.

네모박스

아까와는 다르게 시간을 두고(1초) 네모박스가 변경되는걸 확인할 수 있다.

transition-property

트랜지션(transition)이 적용되는 속성을 정의한다.
예를들어 위의 네모박스 트랜지션에서 시간에 따라, 글자색, 배경색, 네모의 크기(width, height)가 바뀌는 걸 확인 할 수 있었을 것이다.

만약 원하는 트랜지션을 width와 height에만 애니메이션을 적용하고 싶다면

css

transition-property: width, height;

를 추가해서, 배경색과 글자색은 바로 바뀌고 네모의 크기는 애니메이션으로 바뀌게 된다.

실습을 해보면,

css

.box--transition-width-height-only {
    transition-property: width, height;
}

.box--transition-width-height-only로 width와 height에만 트랜지션이 적용되는 css 클래스를 생성했고,

html

<div class="box box--transition-width-height-only" data-target="prac04">
    네모박스
</div>

로 이번엔 네모박스가 `box` 클래스 속성과 더불어 `box--transition-width-height-only` 도 갖게 선언되었다. 그러면 마찬가지로 아래의 네모박스 형태가 나올것이고

네모박스

위 버튼을 눌러 box--to 클래스를 추가하여 트랜지션을 확인해보자. 글자색, 배경색은 깜빡이며 바로 바뀌고, 크기 속성만 애니메이션 효과가 적용되는것을 알 수 있다.

• 기본은 all 이며 말그대로 전체 속성에 적용한다.
• 어떠한 속성도 적용하지 않는 none 값도 있다.
• 실무에서 한번도 이 프로퍼티를 수정한적은 없다.

transition-timing-function

이름이 긴 이 속성은 transition-duration 에서 정의된 시간 동안 얼마만큼의 빠르기로 애니메이션이 적용될지를 결정한다. 주로 아래 속성 중 하나를 사용하게 될 것이다

• ease: 중간까지 점점 빨랐다가 다시 느려짐
• linear: 일정한 속도
• ease-in: 점점 빨라짐
• ease-out: 점점 느려짐
• ease-in-out: ease랑 비슷, 빨라졌다가 느려지면서 종료

하지만 그 외에도 직접 cubic-bezier 선언을 통해 속도를 커스텀 할 수도 있고, 연속적이지 않게 끊겨서 선언할 수도 있다.

이번엔 조금 다른 모양의 div로 실습을 해보겠다.

css

.box--to-timing {
    width: 300px;
    transition-duration: 3s;

}

.ease-in {
    transition-timing-function: ease-in;
}

.linear {
    transition-timing-function: linear;
}

이제 네모박스는 그냥 width만 300px으로 3초동안 늘어나는 직사각형 모양이 될 것이며 transition-timing-function 속성에 따라 ease-out과 linear 클래스가 추가되었다

html

<div class="box ease-in" data-target="prac05">
    ease-in
</div>

<div class="box linear" data-target="prac05">
    linear
</div>

그리고 네모박스 2개를 만들어, 하나에는 ease-out property를, 다른 하나에는 linear 프로퍼티가 적용되게 만들었다.

이제 아래 버튼을 눌러 속도를 비교해보자.

ease-in

linear

ease-in은 느렸다가 빨라지고,
linear는 일정한 속도로 박스가 커지는 것을 확인할 수 있다.

이것을 모든 프로퍼티로 만들어서 적용해보면

ease

linear

ease-in

ease-out

ease-in-out

각 속성이 어떠한 속도로 움직이는지도 알 수 있다.

그 외 다른 옵션들

• cubic-bezier를 이용하여 속도를 직접 커스텀하거나
• step을 이용하여 끊기는 효과도 처리할 수 있다
• 하지만 실무에서 그렇게까지 써본적은 없다.
• 그래서 여기선 다루지 않을 예정, 만약 디자이너가 요구하면 잘 타협해보자. (아니면 공부합시다.)

transition 속성

transition CSS 프로퍼티는 위에 다룬것들을 모두 어우르는 단축 속성이다.

기본적으로

/* property name | duration | easing function | delay */
transition: margin-right 4s ease-in-out 1s;

위와 같이 쓰게되며 이 말은 아래의 CSS코드와 같다

css

transition-property: margin-right;
transition-duration: 4s;
transition-timing-function: ease-in-out;
transition-delay: 1s;

기본적으로 정리를 이렇게 마치며, 만약 추가할 내용이 있다면 해당 페이지에 업데이트 하겠다.

Reference

• https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function