CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

@keyframes

  • @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다.
  • IE는 버전 10 이상에서 사용할 수 있습니다.

문법

@keyframes name {
    0% { ... }
    n% { ... }
    100% { ... }
}
  • name : 애니메이션의 이름을 정합니다.
  • 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 됩니다.
  • n% : n%일 때의 모양을 정합니다.
  • 100% : 끝날 때의 모양을 정합니다. 100% 대신 to를 사용해도 됩니다.

예제 1

  • 박스가 일정 속도로 커지는 애니메이션입니다.
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>CSS</title>
        <style>
            @keyframes big {
                from {
                    width: 0px;
                    height: 0px;
                }
                to {
                    width: 150px;
                    height: 150px;
                }
            }
            div#jb {
                margin: 30px auto;
                background-color: orange;
                animation-name: big;
                animation-duration: 4s;
                animation-timing-function: linear;
                animation-delay: 0s;
                animation-iteration-count: 1;
                animation-direction: normal;
                animation-fill-mode: forwards;
                animation-play-state: running;
            }
        </style>
    </head>
    <body>
        <div id="jb"></div>
    </body>
</html>

예제 2

  • 네 단계로 나누어 커졌다 작아졌다 하는 애니메이션입니다.
@keyframes big {
    0% {
        width: 0px;
        height: 0px;
    }
    25% {
        width: 150px;
        height: 150px;
    }
    50% {
        width: 100px;
        height: 100px;
    }
    75% {
        width: 200px;
        height: 200px;
    }
    100% {
        width: 150px;
        height: 150px;
    }
}

CSS 강좌