animation

CSS
Created 2018-11-23 Last Modified 2021-03-04

1 animation
2 @keyframes
3 animation-duration
4 animation-timing-function
5 animation-delay
6 animation-direction
7 animation-fill-mode
8 animation-play-state

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

CSS / 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기

웹브라우저에서 텍스트를 마우스로 드래그하면 선택된 글자는 파란색 배경에 흰색을 바뀝니다. 이 색은 CSS로 바꿀 수 있습니다. 사용하는 선택자는 가상 요소 ::selection입니다. 다음은 텍스트를 선택했을 때 배경은 검은색으로, 글자는 노란색으로 만드는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ::selection { background-color: black; color: yellow; } </style> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. ...

CSS / 구글 웹폰트 사용하는 방법

구글에서 많은 웹폰트를 제공하고 있다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아본다. 웹폰트 선택하기 웹브라우저로 Google Fonts에 접속한다. 왼쪽에서 적절히 필터한다. 한글 글꼴이 필요하다면 Language를 Korean으로 한다. 원하는 글꼴을 클릭한다. 사용할 스타일을 선택한다. 오른쪽에 선택한 글꼴과 스타일이 나오고, 웹폰트를 사용하기 위한 코드 예시가 나온다. 여러 글꼴과 스타일을 선택할 수도 있다. 웹폰트 사용하기 예를 들어 Noto Sans Korean 100과 400을 ...

CSS / overflow / 내용이 요소의 크기를 벗어났을 때 처리 방법 정하는 속성

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / Flex / order / 아이템의 순서 정하는 속성

Flex로 아이템을 배치할 때, 입력한 순서대로 출력됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; margin: 0px; ...

CSS / background-image / 배경 이미지 정하는 속성

개요 background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-image: none | url | initial | inherit none : 이미지를 배경으로 사용하지 않습니다. url : 이미지의 URL을 입력합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 ...

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

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

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS / 체크박스 꾸미는 방법

체크박스 꾸미는 방법 체크박스를 바로 꾸미는 건 어렵습니다. 그래서 체크박스와 연결된 라벨(label)을 만들고 라벨을 꾸밉니다. 라벨을 클릭하면 체크박스가 체크되고, 다시 클릭하면 체크가 해제되는 성질을 이용하는 겁니다. 체크박스 만들기 빈 라벨을 가진 체크박스를 만듭니다. for 속성을 이용해서 체크박스와 라벨을 연결시켜야 합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / Grid / 실전 예제

높이가 같은 박스 만들기 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; font-family: Consolas, monospace; ...

CSS / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 상속하는 속성 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 즉 <style> p { color: blue; } </style> <p>Lorem <em>Ipsum</em></p> 일 때, Lorem 뿐만 아니라 Ipsum의 색도 파란색이 됩니다. 상속하지 않는 속성 예를 들어 ...