animações CSS3

CSS3, podemos criar animações que podem substituir muitas páginas imagens animadas, animações em Flash e JavaScripts.

CSS3
animação

CSS3 @keyframes regras

Para criar animações CSS3, você terá que aprender as regras @keyframes.

@keyframes regra é para criar animação. Especifique um estilo CSS e animação irá gradualmente mudar para o novo estilo do estilo atual dentro das regras @keyframes.

Suporte a navegadores

Números na tabela representam o primeiro navegador a suportar o número da versão da propriedade.

Imediatamente após a -webkit- digitais, -ms- ou -moz- atrás em apoio do prefixo atribuem primeiro número da versão do browser.

属性
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

Exemplos

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

animações CSS3

Ao criar @keyframes animação, vinculá-lo a um selector, caso contrário, a animação não terá nenhum efeito.

Especifique pelo menos dois propriedade de animação CSS3 está vinculado a um selector:

Especifica o nome do animação
Quando uma animação de comprimento predeterminado

Exemplos

A animação "myfirst" amarrado a div elemento Duração: 5 segundos:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

tente »

Nota: Você deve definir a duração do nome de animação e animação.Se você omitir a duração da animação não será executado porque o valor padrão é 0.

O animações CSS3 são?

elemento de animação é fazer uma mudança gradual de um estilo para outro efeito estilo.

Você pode mudar tantos estilos como muitas vezes.

Utilize a variação percentual do tempo prescrito, ou palavra-chave "de" e "para", o equivalente a 0% e 100%.

0% é o início da animação, a animação é 100% completa.

Para um melhor suporte ao navegador, você deve sempre definir a 0% e 100% do selector.

Exemplos

Alterar a cor de fundo quando a animação é de 25% e 50%, e 100% concluído quando a animação mudou novamente:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

tente »

Exemplos

Alterar a cor de fundo e localização:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

tente »

propriedades de animação CSS3

A tabela a seguir lista as regras @keyframes e todas as propriedades de animação:

propriedade	descrição	CSS
@keyframes	Disposições animação.	3
animação	propriedade estenográfica para todas as propriedades de animação, além de propriedade de animação-play-state.	3
animation-name	Especifica a animação nome @keyframes.	3
animação duração	Disposições animação leva para completar um ciclo de segundos ou milissegundos. O padrão é 0.	3
animation-timing-function	Uma velocidade predeterminada da curva de animação. O padrão é "facilidade".	3
animação em atraso	Quando uma animação predeterminada começa. O padrão é 0.	3
animação iteração contagem	número predeterminado de vezes que a animação é reproduzida. O padrão é 1.	3
animação direção	Se as disposições da animação para jogar na ordem inversa para o próximo ciclo. O padrão é "normal".	3
animation-play-state	Se as disposições da animação está em execução ou em pausa. O padrão é "correr".	3

Os dois exemplos a seguir definir todas as propriedades de animação:

Exemplos

Execute animação myfirst, definir todos os atributos:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

tente »