--- title: animation slug: Web/CSS/animation tags: - Animações - Animações CSS - CSS - CSS Animations - CSS3 - Propriedade CSS - Referencia - Web translation_of: Web/CSS/animation ---
{{CSSRef}}

A propriedade CSS abreviada animation, aplica uma animação entre estilos. É uma abreviação de {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, e {{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 name | duration | timing-function | delay */
animation: 3s linear 1s slidein;

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

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

A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS transitions.

{{cssinfo}}

Syntax

A propriedade animation é especificada como uma ou mais animações, separadas por commas.

Cada animação individual é especificada  como:

A ondem dos valores definidos dentro de cada animação é importante: o primeiro valor pode ser analisado com um {{cssxref("<time>")}} é atribuido para o {{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.

Values

<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")}}.

Formal syntax

{{csssyntax}}

Examples

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.

Accessibility concerns

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.

Specifications

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

Compatibilidade com navegadores

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

Quantum CSS notes

See also