[CSS] animation (애니메이션)

Programming/CSS

[CSS] animation (애니메이션)

Isaac S. Lee 2023. 10. 4. 10:00

🍁animation

CSS 객체의 움직임을 단순하게 표현할 때에는 transition을 사용한다.

animation은 그보다 더 나아가 움직임을 세밀하게 통제할 수 있는 옵션이 존재한다.

[CSS] transition (전환)

🍁transition transition은 객체의 속성(상태) 값이 변화되는 과정을 시간 순서대로 보여주는 애니메이션 속성이다. 이 작업은 본래 JavaScript에서나 할 수 있는 것이었다. 하지만 지금은 CSS에서 간단하

isaac-christian.tistory.com

transition에 대해서는 위 글을 참고하도록 하자.

🍁animation의 사용

animation-name: 프레임(움직임)을 정의
animation-duration: 소요 시간
animaiton-fill-mode: 애니메이션이 끝난 후의 상태
animation-timing-function: 가속도 제어
animation-delay: 지연 시간
animation-iteration-count: 반복 횟수
animation-direction: 프레임의 재생 방향
기타 등등

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/ex48.css">
</head>
<body>
    <!-- div#box$.box{상자$}*3 -->
    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div>
</body>
</html>

body {
    padding-bottom: 300px;
}

.box {
    border: 1px solid black;
    width: 150px;
    height: 150px;
    margin: 30px;
}

#box1 { background-color: tomato; }
#box2 { background-color: gold; }
#box3 { background-color: dodgerblue; }

/* body에 마우스를 올린 상태 */
#box1 {
    /* transition: all 1s; */
}

@keyframes key1 {
    from {
        width: 150px;
    }
    to {
        width: 500px;
    }
}

body:hover #box1 {
    /* width: 500px; */
    animation-name: key1;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

위 코드는 width라는 속성을 150px로부터 500px까지 1초 동안 변화시키라는 의미이다.

변화를 주고 싶은 시점에 animation을 적용한다.

animation의 duration은 transition의 duration과 같이 지속 시간을 의미하며, keyframes에는 어떤 속성에 어떤 변화값을 줄 것인지를 작성한다.

그리고 animation-fill-mode: forwards 속성은 마지막 변화한 순간에서 애니메이션을 멈춰 있게 하는 속성이다.

마우스를 올려두었을 때 애니메이션이 작동하도록 했으므로 마우스를 올려두지 않으면 순간적으로 돌아오게 된다.

내가 어떤 시점에 animation 또는 transition을 적용했는지를 이해하고 있어야 한다.

단순한 작업에는 transition이 훨씬 편하다!

하지만 animation으로만 할 수 있는 작업이 있다.

🍁animation의 활용

from과 to 대신에 %를 사용한다.

from과 to 대신에 0%과 100%로 작성할 수 있다.

from은 animation이 시작하는 순간(0초 되는 순간)을 말하며, to는 끝나는 순간을 말한다.

%로 작성하면 내가 원하는 구역대를 시간대로 자를 수 있다는 장점이 있다.

@keyframes key2 {
    /* from {
        width: 150px;
    }
    to {
        width: 500px;
    } */
    0% {
        width: 150px;
    }
    50% {
        width: 200px;
    }
    100% {
        width: 500px;
    }
}

body:hover #box2 {
    animation-name: key2;
    animation-duration: 5s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

150px에서 200px로 갈 때에는 느리고, 200px에서 500px로 갈 때에는 빠르다.

5초에서 50%는 2.5초이다. 따라서 0초에서 2.5초까지는 50px(200px-150px)을 늘리고, 2.5초에서 5초까지는 300px(500px-200px)을 늘리게 된다.

이처럼 animation 기능은 구간별 통제를 하는 게 가능하다.

@keyframes key2 {
    /* from {
        width: 150px;
    }
    to {
        width: 500px;
    } */
    0% {
        transform: translate(0px, 0px);
    }
    25% {
        transform: translate(300px, 0px);
    }
    50% {
        transform: translate(300px, 300px);
    }
    75% {
        transform: translate(0px, 300px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

body:hover #box2 {
    animation-play-state: paused;
}

#box2 {
    animation-name: key2;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 3;
    animation-direction: alternate; /* alternate, reverse, alternate-reverse */
}

animation-iteration-count: infinite로 적용하면 영원히 animation이 실행된다. 이때 animation-play-stateanimation-play-state: paused 속성을 주면 잠깐 멈춘다.

버튼 만들기

<body>
    <h1>버튼</h1>
    <button class="effect">글쓰기</button>
    <button class="effect">돌아가기</button>
    <button class="effect">가입하기</button>
    <hr>
    <button class="effect3">
        <i class="fa-solid fa-pen"></i>
        글쓰기
    </button>
</body>

.effect {
    padding: 10px;
}

.effect:hover {
    animation-name: key-effect2;
    animation-duration: 0.1s;
    animation-iteration-count: 3;    
}

@keyframes key-effect {
    0% { transform: translate(0px, 0px); }
    25% { transform: translate(-5px, 0px); }
    50% { transform: translate(0px, 0px); }
    75% { transform: translate(5px, 0px); }
    100% { transform: translate(0px, 0px); }
}

@keyframes key-effect2 {
    0% { transform: scale(1, 1) }
    25% { transform: scale(1.2, 1.2) }
    50% { transform: scale(1, 1) }
    75% { transform: scale(0.8, 0.8) }
    100% { transform: scale(1, 1) }
}

.effect3:hover > i {
    animation-name: key-effect;
    animation-duration: 0.05s;
    animation-iteration-count: infinite;
}

버튼에 hover 속성을 주어서 떨림(진동)을 주는 작업을 해보도록 하자.

animation은 키프레임에 대한 변화를 정해 놓고, 재사용할 수 있다는 장점이 있다.

공 튀기기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/ex49.css">
</head>
<body>
    <div id="box">
        <div id="ball"></div>
    </div>
</body>
</html>

#box {
    border: 20px solid black;
    width: 500px;
    height: 800px;
}

#ball {
    background-color: dodgerblue;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto; /* 가운데 정렬 */

    animation-name: key-ball;
    animation-duration: .7s;
    /* animation-fill-mode: forwards; */
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
}

@keyframes key-ball {
    from {
        transform: translate(0px, 0px);
    }
    to {
        transform: translate(0px, 750px);
    }
}

바닥에 통통 튀기는 거 같은 공을 구현했다.

이런 방식으로 게임을 만들 수 있을 거 같지만, 수십 개의 animation을 한 화면에서 구현하면 뚝뚝 끊긴다.

그래서 게임 같은 경우에는 HTML Canvas와 JavaScript를 이용하여 구현한다.

애니메이션은 그래프나 차트에 활용하며, 직접 구현하는 것 보다는 라이브러리로 구현한다.

저작자표시 비영리 변경금지 (새창열림)