애니메이션 - animation

CSS3의 animation 속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다.

목차

1. @keyframes
2. animation-name
3. animation-duration
4. animation-timing-function
5. animation-delay
6. animation-iteration-count
7. animation-direction
8. animation-fill-mode
9. animation-play-state
10. 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;

 

기타 CSS 참조

• CSS 기초
• 실전 예제
• 글자 꾸미기
• 문단 꾸미기
• 목록 꾸미기
• 표 꾸미기
• 이미지 꾸미기
• 박스 모델
• 애니메이션
• Flex
• Grid

애니메이션으로 돌아가기