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 value | as each of the properties of the shorthand:
|
|---|---|
| Aplica-se a | all elements, ::before and ::after pseudo-elements |
| Inherited | não |
| Midia | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | não |
| Canonical order | order 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%; } }