Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Introdução

A propriedade animation de CSS é uma propriedade abreviada (ou shorthand property) para animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode e animation-play-state.

Uma lista de propriedades de CSS que podem ser animadas está disponível; vale ressaltar que são as mesmas propriedades suportadas pelas CSS transitions.

Initial valueas each of the properties of the shorthand:
Aplica-se aall elements, ::before and ::after pseudo-elements
Inheritednão
Midiavisual
Computed valueas each of the properties of the shorthand:
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

Sintaxe

Formal syntax: <single-animation>#

where
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<keyframes-name> = <custom-ident> | <string>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

A ordem é importante em cada animação definida: o primeiro valor que pode ser interpretado como <time> é associado à propriedade animation-duration, e o segundo é associado à animation-delay.

Exemplos

Veja exemplos em CSS animations.

Especificações

Especificação Status Comentário
CSS Animations
The definition of 'animation' in that specification.
Rascunho atual  

Compatibilidade entre browsers

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar!

Recurso Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suporte básico (Yes)-webkit 5.0 (5.0)-moz
16.0 (16.0)
10 12-o
12.10 #
4.0-webkit
Recurso Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 2.1 -webkit [1]
4.0 -webkit
5.0 (5.0)-moz
16.0 (16.0)
? ? iOS 2.0-webkit

[1] Suporte parcial: a propriedade animation-fill-mode não está disponível no browser para Android em versões inferiores à 2.3.

Olho de Cylon

Considerando todos os prefixos supracitados, eis uma animação do Olho de Cylon utilizando gradientes lineares e animações que funcionam nos navegadores Firefox, Chrome, Opera e IE10:

<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 {
  color:white;
  height: 100%;
  width: 20%;

  background-color: red;
  background-image: -webkit-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);

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

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

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: mrstork, teoli, Sebastianz, mateusleon
Última atualização por: mrstork,