[CSS] transition

transition

웹페이지에서 애니메이션 효과를 구현하는데는 두가지 방법이 존재한다. tansition과 animation이다.

이 중 transition 속성은 transition에 지정된 속성의 변화를 감지하여 각 속성간의 변화를 천천히 보여주는 애니메이션 효과를 만들어낸다.

transition은 4개의 파라미터를 가진다.

1. 어떤 속성을 transition 할지 (ex. transform, opacity, margin, padding 등등)

2. 몇초간 애니메이션 효과를 보여줄지

3. 어떤 애니메이션 효과를 적용할지

• 애니메이션 효과로는 ease, ease-in, ease-out, ease-in-out 등이 있고 cuibc-bezier() 함수로 커스텀된 애니메이션 효과를 사용할수 있다.

4. 딜레이

사용시 아래와 같이 opacity와 translateY로 기본속성을 정의해 둔다.

.transition {
    transition: all 1s ease-in-out .2s;
    opacity: 0;
    transform: translateY(32px);
}

 

하지만 현상태로는 애니메이션이 동작하지 않는다. transition은 상태와 상태사이의 값을 기준으로 하기 때문에 상태값이 변경되어야 작동이 된다. 따라서 다음과 같이 클래스를 추가해서 상태값 변경을 유도해야 한다.

import style from './style.module.css'
import { useState, useEffect } from 'react'

export default function Transition() {
    const [show, setShow] = useState(false);
    
    useEffect(()=> {
        setShow(true);
    }, []);

    return (
        <div className={`${show ? `${style.show}` : ''} ${style.transition}`}>
            Transition
        </div>
    )
}

 

show 클래스의 상태값을 지정한다.

.show.transition {
    opacity: 1;
    transform: translateY(0);
}

이제 페이지를 새로고침 하면 다음과 같은 애니메이션 효과를 볼수 있다.