animation

Esta tradução está incompleta. Ajude atraduzir este artigo.

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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:
Animatablenão
Canonical orderorder of appearance in the formal grammar of the values

Sintaxe

Formal syntax: <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

where
<single-animation-name> = none | IDENT
<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

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.
Working Draft  

Compatibilidade entre browsers

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,