[CSS] Transition: 요소에 애니메이션 효과 입히기

#1 transition이란?

transition은 요소가 현 상태에서 다른 상태로 전환할 때 동적효과를 부여하는 속성이다.

#2 문법

요소의 현재 상태와 후 상태를 정의한 후에 transition 속성을 통해 전환효과를 가하려는 속성들을 지정한다.

        a {
            color: wheat;
            background-color: tomato;
                        ...
            transition: color background-color ease-in-out 1s;
        }

        a:hover {
            color: tomato;
            background-color: wheat;
        }

#3 적용방법

요소의 현재상태와 후상태를 정의한다.

        a {
            color: wheat;
            background-color: tomato;
                        ...
        }

        a:hover {
            color: tomato;
            background-color: wheat;
        }

스타일이 입힌 요소의 본래 상태에 transition 속성을 넣는다.

transition: color background-color ease-in-out 1s;

transition 속성의 값으로 바꾸고자하는 속성과 전환 효과, 시간을 지정한다.

        a {
            color: wheat;
            background-color: tomato;
                        ...
            transition: color background-color ease-in-out 1s;
        }

        a:hover {
            color: tomato;
            background-color: wheat;
        }

속성을 일일이 지정하기 귀찮다면 속성들을 all로 대체해도 된다.

transition: all background-color ease-in-out 1s;

#3 예제

결과물

요소 위에 마우스를 대면 요소의 배경색과 폰트색을 부드럽게 바꾸기

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>윈터</title>
    <style>
        a {
            color: wheat;
            background-color: tomato;
            text-decoration: none;
            padding: 3px 5px;
            border-radius: 10px;
            font-size: 55px;
            transition: all ease-in-out 1s;
        }

        a:hover {
            color: tomato;
            background-color: wheat;
        }
    </style>
</head>

<body>
    <a href="#">수수수수퍼노바</a>
</body>

</html>

#4 transition 심화

전환효과의 지정

https://matthewlein.com/tools/ceaser에 접속해서 전환효과를 테스트할 수 있다. 하지만 주로 ease-in, ease-out, ease-in-out을 쓰게 된다.

주로 사용하는 변경상태로 hover 외에도 focus와 active가 있다.

예제1: 상태가 바뀌되 속성 하나에만 전환효과 주기

background-color에 전환효과를 주고 color와 border-radius는 즉시 상태 변경된다.

        a {
            color: wheat;
            background-color: tomato;
            text-decoration: none;
            padding: 3px 5px;
            border-radius: 20px;
            font-size: 55px;
            transition: background-color ease-in-out 1s;
        }

        a:hover {
            color: tomato;
            background-color: wheat;
            border-radius: 5px;
        }

예제2: 상태 변경 시 여러 속성에 다른 전환효과 주기

background-color, color, border-radius를 각각 다른 전환효과를 주었다. 전환효과를 속성별로 다르게 줄 때 (,)로 구분한다.

        a {
            color: wheat;
            background-color: tomato;
            text-decoration: none;
            padding: 3px 5px;
            border-radius: 20px;
            font-size: 55px;
            transition: background-color ease-in-out 1s, color ease-in 3s, border-radius ease-out 5s;
        }

        a:hover {
            color: tomato;
            background-color: wheat;
            border-radius: 5px;
        }

저작자표시 비영리 변경금지