CSS / 애니메이션 / animation

CSS의 애니메이션 속성으로 동적인 효과를 만들 수 있습니다. IE는 버전 10 이상부터 지원합니다.

animation

예제

다음은 CSS로 만든 간단한 애니메이션입니다. 작은 박스가 커졌다 작아집니다.

코드는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      @keyframes big {
        from {
          width: 20px;
          height: 20px;
        }
        to {
          width: 200px;
          height: 200px;
        }
      }
      div#jb {
        margin: 30px auto;
        width: 20px;
        height: 20px;
        background-color: orange;
        animation-name: big;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: 4;
        animation-direction: alternate;
        animation-fill-mode: none;
        animation-play-state: running;
      }
    </style>
  </head>
  <body>
    <div id="jb"></div>
  </body>
</html>

코드의 의미

@keyframes

  • 어떤 모양에서 어떤 모양으로 바꿀지 정합니다.
  • 이름은 big으로 지었고, 20px 정사각형에서 200px 정사각형으로 커집니다.

animation-name

  • 어떤 @keyframes을 사용할지 정합니다.
  • 예제에서는 big을 사용합니다.

animation-duration

  • 애니메이션의 총 시간을 정합니다.
  • 예제에서는 2초 동안 애니메이션을 시작하고 끝냅니다.

animation-timing-function

  • 애니메이션 진행 속도를 정합니다.
  • 예제에서는 등속으로 진행합니다.

animation-delay

  • 애니메이션을 시작하기 전에 대기하는 시간을 정합니다.
  • 예제에서는 2초 대기 후 시작합니다.

animation-iteration-count

  • 애니메이션 반복 횟수를 정합니다.
  • 예제에서는 4회 반복합니다.

animation-direction

  • 애니메이션 진행 방향입니다.
  • 예제에서는 정방향 → 역방향 → 정방향 → 역방향 → …으로 진행하도록 정했습니다.

animation-fill-mode

  • 애니메이션을 마친 후 어떤 상태로 만들지 정합니다.

animation-play-state

  • 애니메이션을 진행할지 멈출지 정합니다.
  • 예제에서는 진행하는 것으로 설정했습니다.

축약형

애니메이션의 여러 속성은 animation 속성으로 줄여서 표현할 수 있습니다.

animation: big 2s linear 2s 4 alternate none running;

@keyframes

  • @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다.

문법

@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"&gt;</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;
  }
}

animation-duration

  • animation-duration은 애니메이션의 진행 시간을 정하는 속성입니다.

문법

animation-duration: time | initial | inherit
  • time : 시간을 정합니다. 기본값은 0입니다. 단위는 s(초) 또는 ms(1000분의 1초)를 사용합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속 받습니다.

예제

3초에 걸쳐 박스가 커지는 예제입니다.

<!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: 3000ms;
			}
		</style>
	</head>
	<body>
		<div id="jb"></div>
	</body>
</html>

animation-timing-function

  • animation-timing-function은 애니메이션 진행 속도를 정하는 속성입니다.

문법

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

기본값은 ease입니다.

예제

아래는 몇 가지 속성값을 비교하는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb {
        margin: 10px 0px;
        width: 100px;
        height: 40px;
        background-color: orange;
      }
      @keyframes run {
        from {
          width: 100px;
        }
        to {
          width: 100%;
        }
      }
      .jb {
        animation-name: run;
        animation-duration: 3s;
        animation-delay: 0.5s;
        animation-fill-mode: forwards;
      }
      .jb1 {
        animation-timing-function: linear;
      }
      .jb2 {
        animation-timing-function: ease;
      }
      .jb3 {
        animation-timing-function: ease-in;
      }
      .jb4 {
        animation-timing-function: ease-out;
      }
      .jb5 {
        animation-timing-function: ease-in-out;
      }
    </style>
  </head>
  <body>
    <div class="jb jb1">linear</div>
    <div class="jb jb2">ease</div>
    <div class="jb jb3">ease-in</div>
    <div class="jb jb4">ease-out</div>
    <div class="jb jb5">ease-in-out</div>
  </body>
</html>

animation-delay

  • animation-delay는 애니메이션의 시작을 지연시키는 속성입니다.

문법

animation-delay: time | initial | inherit
  • time : 시간을 정합니다. 기본값은 0입니다. 단위는 s(초) 또는 ms(1000분의 1초)를 사용합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속 받습니다.

예제

  • 위의 박스는 1초 후에, 아래의 박스는 2초 후에 애니메이션이 시작합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb {
        margin: 10px 0px;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
      @keyframes run {
        from {
          width: 100px;
        }
        to {
          width: 100%;
        }
      }
      .jb1 {
        animation-name: run;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-fill-mode: forwards;
      }
      .jb2 {
        animation-name: run;
        animation-duration: 2s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
      }
    </style>
  </head>
  <body>
    <div class="jb jb1"></div>
    <div class="jb jb2"></div>
  </body>
</html>

animation-direction

  • animation-direction은 애니메이션의 진행 방향 정하는 속성입니다.

문법

animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit
  • normal : 기본값입니다. 정해진 순서로 진행합니다.
  • reverse : 반대 순서로 진행합니다.
  • alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다.
  • alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

예제

  • 박스가 커지는 애니메이션입니다.
  • animation-direction의 값을 정하지 않거나 normal로 정하면, @keyframes에서 정한 순서로 애니메이션이 진행됩니다.
<!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: 2s;
				animation-timing-function: linear;
				animation-delay: 0s;
				animation-direction: normal;
			}
		</style>
	</head>
	<body>
		<div id="jb"></div>
	</body>
</html>
  • 값을 reverse로 하면 애니메이션이 반대 방향으로 진행됩니다.
animation-direction: reverse;
  • 값을 alternative로 하면 정방향 진행한 후 역방향으로 진행합니다. 애니메이션 횟수를 늘려야 어떻게 되는 건지 알기 좋습니다.
animation-iteration-count: 2;
animation-direction: alternate;
  • 값을 alternative-reverse로 하면 역방향 진행한 후 정방향으로 진행합니다.
animation-iteration-count: 2;
animation-direction: alternate-reverse;

animation-fill-mode

  • animation-fill-mode는 애니메이션이 진행되지 않을 때의 모양을 정합니다. 즉, 시작하기 전, 끝난 후의 모양을 정합니다.

문법

animation-fill-mode: none | forwards | backwards | both | initial | inherit;

기본값은 none입니다.

예제

  • 아래는 각 값의 차이를 보여주는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb {
        margin: 10px 0px;
        width: 50%;
        height: 50px;
        background-color: orange;
      }
      @keyframes run {
        from {
          width: 10%;
        }
        to {
          width: 100%;
        }
      }
      .jb {
        animation-name: run;
        animation-delay: 0.5s;
        animation-duration: 2s;
      }
      .jb1 {
        animation-fill-mode: none;
      }
      .jb2 {
        animation-fill-mode: forwards;
      }
      .jb3 {
        animation-fill-mode: backwards;
      }
      .jb4 {
        animation-fill-mode: both;
      }
    </style>
  </head>
  <body>
    <div class="jb jb1"></div>
    <div class="jb jb2"></div>
    <div class="jb jb3"></div>
    <div class="jb jb4"></div>
  </body>
</html>

animation-play-state

  • animation-play-state는 애니메이션을 진행 여부를 정하는 속성입니다.

문법

animation-play-state: running | paused | initial | inherit;
  • running : 애니메이션을 진행합니다. 기본값입니다.
  • paused : 애니메이션을 진행하지 않습니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속 받습니다.

예제

체크박스를 체크하면 애니메이션이 시작됩니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .jb {
        margin: 10px 0px;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
      @keyframes run {
        from {
          width: 100px;
        }
        to {
          width: 100%;
        }
      }
      .jb1 {
        animation-name: run;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-play-state: paused;
      }
      input:checked + div {
        animation-play-state: running;
      }
    </style>
  </head>
  <body>
    <input type="checkbox">
    <div class="jb jb1"></div>
  </body>
</html>

같은 카테고리의 다른 글
CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS / Grid / IE에 적용시키는 방법 / Autoprefixer CSS online

CSS의 Grid는 인터넷 익스플로러에서 작동하지 않습니다. 최신 버전인 IE 11에서도 마찬가지입니다. 예를 들어 아래의 HTML 문서는 크롬이나 엣지 등 웹브라우저에서 의도한 대로 잘 나옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기

CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기

content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

CSS / background-clip / 배경을 어디에 넣을지 정하는 속성

개요 HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-clip: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역과 그 안쪽 영역을 채웁니다. padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다. content-box : 내용 영역과 그 안쪽 영역을 채웁니다. initial : ...

CSS / font-style / 글자 모양 정하는 속성

CSS / font-style / 글자 모양 정하는 속성

개요 font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-style: normal | italic | oblique | initial | inherit normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 ...

CSS / line-height / 줄 높이 정하는 속성

CSS / line-height / 줄 높이 정하는 속성

개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.  percentage : 글자 크기의 몇 %로 줄 ...

CSS / 표(table) 꾸미기 / 테두리 만들기

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / list-style-position / 목록의 마커 위치 정하는 속성

CSS / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / list-style-type / 목록 앞의 마커 정하는 속성

CSS / list-style-type / 목록 앞의 마커 정하는 속성

목록은 <ul> 또는 <ol> 태그로 만든다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 모양의 마커를 사용할지는 list-style-type으로 정한다. 속성값은 다음과 같다. <ul> : disc, circle, square <ol> : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha 공통 : none 의미상으로는 <ul>과 <ol>에 사용하는 속성값을 구분하는 게 맞지만, <ul>에 decimal을 사용하거나 ...

CSS / font-size / 글자 크기 정하는 속성

CSS / font-size / 글자 크기 정하는 속성

개요 font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit medium : 웹브라우저에서 정한 기본 글자크기입니다. xx-small, x-small, small, large, x-large, xx-large : medium에 ...

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...