CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다.
목차
animation
CSS 애니메이션은 어떤 면에서는 트랜지션(transition)과 비슷하고 어떤 면에서는
다릅니다. 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로
추가해 전체적으로 부드럽게 변하는 애니메이션 효과를 만들어 낸다는 것은
비슷하지만 CSS 애니메이션은 시작해서 끝내는 동안 원하는 곳 어디서든 스타일을
바꾸며 애니메이션을 정의 할 수 있다는 점이 트랜지션과 다릅니다.
이때 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(keyframe)이라고
부릅니다.
@keyframes
- 어떤 모양에서 어떤 모양으로 바꿀지 정합니다.
- 애니메이션의 이름을 정합니다.
- 0% 또는 from : 시작할 때의 모양을 정합니다.
- 100% 또는 to : 끝날 때의 모양을 정합니다.
예제
다음은 공이 튀는 간단한 예제입니다. 바닥에서 너비가 커지며 찌그러집니다.
@keyframes의 이름은 ball이고 0% - 95% - 100% 순으로 스타일일 지정합니다.
<div></div>
@keyframes ball {
0% {
top: 0px;
}
95% {
width: 100px;
}
100% {
top: 300px;
width: 115px;
height: 90px;
}
}
div {
position: relative;
left: 100px;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: #000000;
animation: ball 1s ease-in infinite alternate;
}
animation-name
- 여러 개의 애니메이션이 있다면 그 중에 어떤 @keyframes을 사용할지 정합니다.
- @keyframes과 animation-name을 일치시킵니다.
예제
다음은 @keyframes 이름과 animation-name을 일치시킨 간단한 예제입니다.
<div>box</div>
@keyframes box {
0% {
left: 100px;
}
100% {
left: 480px;
}
}
div {
animation-name: box;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
position: absolute;
text-align: center;
top: 160px;
left: 100px;
width: 100px;
height: 50px;
line-height: 50px;
margin-left: -50px;
border-radius: 5px;
background-color: #000;
color: #fff;
}
animation-duration
- 애니메이션의 총 실행 시간을 정합니다.
- 단위는 s 또는 ms 를 사용합니다.
- 값을 지정하지 않거나 동작하지 않습니다.
- 0 또는 음수 값은 동작하지 않습니다.
예제
다음은 애니메이션을 얼마 동안 재생할 것인지 정한 간단한 예제입니다.
<div id="ani" class="zero">0</div>
<div id="ani" class="minus">-2s</div>
<div id="ani" class="s">4s</div>
<div id="ani" class="ms">800ms</div>
.zero {
top: 40px;
animation-duration: 0;
}
.minus {
top: 100px;
animation-duration: -2s;
}
.s {
top: 160px;
animation-duration: 4s;
}
.ms {
top: 220px;
animation-duration: 800ms;
}
@keyframes duration {
from {
left: 100px;
background-color: #4285f4;
}
to {
left: 480px;
background-color: #4285f4;
}
}
div {
position: absolute;
text-align: center;
left: 100px;
width: 100px;
height: 50px;
line-height: 50px;
margin-left: -50px;
border-radius: 5px;
background-color: #000000;
color: #ffffff;
}
$(document).ready(function(){
$('div').click(function(){
$(this).css('animation-name','duration');
});
});
animation-timing-function
애니메이션 진행 속도를 정합니다.
- linear : 시작부터 끝까지 똑같은 속도로 움직입니다.
- ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막에는 천천히 끝냅니다. 기본 값입니다.
- ease-in : 시작을 느리게 합니다.
- ease-out : 느리게 끝냅니다.
- ease-in-out : 느리게 시작하고 느리게 끝냅니다.
예제
다음은 애니메이션 진행 속도 변화를 비교한 예제입니다. 사각형들이 어떤 속도로 변하는지 지켜보세요.
animation-delay
- 애니메이션을 시작하기 전에 대기하는 시간을 정합니다.
- 단위는 s 또는 ms 를 사용합니다.
- 기본값은 0s 입니다.
예제
<div class="zero">0</div>
<div class="now">now</div>
<div class="s">2초</div>
<div class="minus">-1초</div>
.zero {
top: 40px;
animation-delay: 0s;
}
.now {
top: 100px;
animation-delay: now;
}
.s {
top: 160px;
animation-delay: 2s;
}
.minus {
top: 220px;
animation-delay: -1s;
}
@keyframes boxDelay {
from {
left: 100px;
background-color: #4285f4;
}
to {
left: 480px;
background-color: #4285f4;
}
}
div {
position: absolute;
text-align: center;
left: 100px;
width: 100px;
height: 50px;
line-height: 50px;
margin-left: -50px;
border-radius: 5px;
background: #000000;
color: #ffffff;
/* animation-name:boxDelay; */
animation-timing-function: linear;
animation-duration: 2s;
}
$(function(){
$('div').click(function(){
$(this).css('animation-name','boxDelay');
});
});
animation-iteration-count
- 애니메이션 실행 후 반복할 횟수를 정합니다.
- infinite : 무한 반복합니다.
예제
<div class="num2">2번 반복</div>
<div class="num13">1.3번 반복</div>
<div class="infinite">infinite</div>
.num2 {
top: 40px;
animation-iteration-count: 2;
}
.num13 {
top: 100px;
animation-iteration-count: 1.3;
}
.infinite {
top: 160px;
animation-iteration-count: infinite;
}
@keyframes iteration-count {
from {
left: 100px;
background-color: #4285f4;
}
to {
left: 480px;
background-color: #4285f4;
}
}
div {
position: absolute;
text-align: center;
left: 100px;
width: 100px;
height: 50px;
line-height: 50px;
margin-left: -50px;
border-radius: 5px;
background-color: #000000;
color: #ffffff;
/*animation-name:iteration-count; */
animation-timing-function: linear;
animation-duration: 2s;
}
$(document).ready(function(){
$('div').click(function(){
$(this).css('animation-name','iteration-count');
});
});
animation-direction
- 애니메이션 진행 방향입니다.
- normal : 순방향으로 재생합니다. (기본값)
- alternate : 순방향으로 시작해 역방향과 순방향으로 번갈아 재생합니다.
- reverse : 역방향으로 재생합니다.
- alternate-reverse : 역방향으로 시작해 순방향과 역방향으로 번갈아 재생합니다.
예제
<div class="normal">normal</div>
<div class="alternate">alternate</div>
<div class="reverse">reverse</div>
<div class="a_reverse">alternate-reverse</div>
.normal {
top: 40px;
animation-direction: normal;
}
.alternate {
top: 100px;
animation-direction: alternate;
}
.reverse {
top: 160px;
animation-direction: reverse;
}
.a_reverse {
top: 220px;
animation-direction: alternate-reverse;
}
@keyframes direction {
from {
left: 40px;
background-color: #4285f4;
}
to {
left: 400px;
background-color: #4285f4;
}
}
div{
position: absolute;
text-align: center;
left: 40px;
width: 150px;
height: 50px;
line-height: 50px;
border-radius: 5px;
background: #000000;
color: #ffffff;
/* animation-name:direction; */
animation-duration: 2s;
animation-iteration-count: 3;
animation-timing-function: ease-in;
}
$(function(){
$('div').click(function(){
$(this).css('animation-name','direction');
});
});
animation-fill-mode
- 애니메이션을 마친 후 어떤 상태로 만들지 정합니다.
animation-play-state
- 애니메이션을 진행할지 멈출지 정합니다.
- running : 재생합니다. (기본값)
- paused : 정지합니다.
축약형
애니메이션의 여러 속성은 animation 속성으로 줄여서 표현할 수 있습니다.
animation: liveblogger 2s linear 2s infinite alternate none running;