CSS 트랜지션

2020-12-11

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 일어나는 것이 아니라 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 명시적으로 리스트를 작성해서 어떤 속성을 움직이게 할지, 딜레이를 설정해서 언제 애니메이션이 시작할지, 지속 시간을 설정해서 트랜지션을 얼마나 지속할지, 타이밍 함수를 사용해서 어떻게 트랜지션을 실행하는지 결정하게 한다.

애니메이션 가능한 CSS 속성

어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있다. 애니메이션 가능한 속성의 집합은 유한한 집합으로 제한된다. 애니메이션 가능한 속성의 집합은 변할 수 있기 때문에 주의하여 진행하여야 한다.

1
2
3

<body>
    <div class="box"></div>
</body>

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #0000FF;
    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
    background-color: #FFCCCC;
    width:200px;
    height:200px;
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

트랜지션 정의에 사용한 CSS 속성

CSS 트랜지션은 단축(shorthand) 속성 transition을 사용하여 제어한다. 트랜지션을 설정하는 가장 좋은 방법이며, 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문이다.

transition-property
트랜지션을 적용해야 하는 CSS 속성의 이름(들)을 명시한다. 나열된 속성만 트랜지션하는 동안 움직인다. 나머지 속성 변화들은 보통 때와 같이 즉시 발생한다.

transition-duration
트랜지션이 일어나는 지속 시간을 명시한다. 트랜지션동안 모든 속성에 적용하는 단일 지속시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있다.

transition-timing-function
속성의 중간값을 계산한느 방법을 정의하는 함수를 명시한다. 트랜지션의 중간값을 계산하는 방법을 결정하며, 대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되기 때문에 상응하는 함수의 그래프로 제공하여 명시할 수 있다.

transition-delay
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의한다.

// 단축문법
div {
    transition: <property> <duration> <timing-function> <delay>;
}

트랜지션 완료 감지하기

element.addEventListener() 메소드를 사용하여 이 이벤트를 모니터링할 수 있다.

propertyName
트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열.

elapsedTime
이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수. 이 값은 transition-delay 값에 영향을 받지 않는다.

1	el.addEventListener("transitionend", updateTransition, true);

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