Index

0. File download

1. Keyframe

1.1 Keyframe에 대하여

@keyframes에 대하여 가벼운 예제를 보고 가도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 키프레임 이름 == 애니메이션 이름 */
        @keyframes hojun {
            0% {
                transform: translate(0, 0);
            }

            100% {
                transform: translate(300px, 0) rotate(360deg) scale(2);
            }
        }

        div {
            margin: 200px;
            width: 100px;
            height: 100px;
            background-color: red;

            animation: hojun 1s;
        }
    </style>
</head>
<body>
    <div>hello world</div>
</body>
</html>

해당 @keyframes hojun을 설정하여 div의 animation으로 1초간격으로 주면 아래와 같이 실행되게 됩니다.

이처럼 Keyframe은 어떤 변화가 일어나는 지점을 설정하여 특정 시간 동안 해당 Property와 Value를 변화시킵니다.

+ transition과 animation의 차이점 transition과 animation 속성은 Javascript의 도움 없이 오브젝트에 직접 애니메이션 효과를 적용할 때 사용합니다. transition과 animation은 요소 상태에 대한 의존 여부에 대해 차이를 가집니다. transition은 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있습니다. 또한 animation 속성은 @keyframes 속성을 이용해 프레임을 추가할 수 있습니다.

1.2. Keyframe 규칙

@keyframes은 애니메이션이 만들어지는 부분입니다. from 속성이나 0% 속성에 설정한 스타일부터 to 속성이나 100% 속성에 설정한 스타일로 점차 변경되면서 애니메이션이 재생됩니다. 0%과 100% 사이에는 여러 개의 중간 속성을 설정할 수 있습니다.

/* [ from ~ to 속성 ] */
@keyframes animation-name {
/* 애니메이션의 시작 프레임 */
from {                      
	styles;
}
/* 애니메이션의 종료 프레임 */
to {
	styles;
}

/* [ 0% ~ 100% 속성 ] */
@keyframes animation-name {
/* 애니메이션의 시작 프레임 */
0% {
	styles;
}
50% {
	styles;
}
/* 애니메이션의 종료 프레임 */
100% {
	styles;
}

1.3 Animation 적용하기

CSS3 애니메이션을 이용하면 여러 개의 CSS 스타일을 부드럽게 전환시킬 수 있습니다. @keyframes은 CSS 스타일의 변화 과정을 나타낼 때 사용됩니다. @keyframes을 이용한 애니메이션은 @transition보다 정밀한 효과를 구현할 수 있습니다.