--- title: animation slug: Web/CSS/animation tags: - CSS - CSS Animations - CSS Property - Reference translation_of: Web/CSS/animation ---
{{CSSRef}}

animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}}의 단축 속성입니다.

{{EmbedInteractiveExample("pages/css/animation.html")}}
/* @keyframes duration | timing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

애니메이션 가능한 속성을 확인해보세요. CSS 트랜지션에도 적용된다는 점을 참고하세요.

{{cssinfo}}

구문

The animation property is specified as one or more single animations, separated by commas.

Each individual animation is specified as:

The order of values within each animation definition is important: the first value that can be parsed as a {{cssxref("<time>")}} is assigned to the {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}.

The order within each animation definition is also important for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsed, keywords that are valid for properties other than {{cssxref("animation-name")}}, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.

값

<single-animation-iteration-count>
The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}.
<single-animation-direction>
The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}.
<single-animation-fill-mode>
Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in {{cssxref("animation-fill-mode")}}.
<single-animation-play-state>
Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}.

형식 구문

{{csssyntax}}

예제

Cylon Eye

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: linear-gradient(to right,
      rgba(0, 0, 0, .9) 25%,
      rgba(0, 0, 0, .1) 50%,
      rgba(0, 0, 0, .9) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }

{{EmbedLiveSample('Cylon_Eye')}}

See Using CSS animations for additional examples.

접근성 고려사항

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

명세

Specification Status Comment
{{SpecName('CSS3 Animations', '#animation', 'animation')}} {{Spec2('CSS3 Animations')}} Initial definition.

브라우저 호환성

{{Compat("css.properties.animation")}}

Quantum CSS notes

같이 보기