tutoriais mais recente desenvolvimento web
×

CSS Tutorial

CSS CASA CSS Introdução CSS Sintaxe CSS Como CSS cores CSS Fundos CSS Fronteiras CSS margens CSS Preenchimento CSS Altura largura CSS Texto CSS fontes CSS ligações CSS listas CSS tabelas CSS Modelo de Caixa CSS Contorno CSS de exibição CSS Largura máxima CSS Posição CSS Flutuador CSS Inline-block CSS Alinhar CSS combinadores CSS Pseudo-classe CSS Pseudo-elemento CSS Barra de navegação CSS dropdowns CSS tooltips CSS Galeria de imagens CSS Opacidade imagem CSS Sprites imagem CSS attr seletores Formas CSS CSS contadores

CSS3

CSS3 Introdução CSS3 Cantos arredondados CSS3 Imagens de fronteira CSS3 Fundos CSS3 cores CSS3 gradientes CSS3 sombras CSS3 Texto CSS3 fontes CSS3 transformações 2D CSS3 transformações 3D CSS3 transições CSS3 animações CSS3 imagens CSS3 botões CSS3 Paginação CSS3 várias Colunas CSS3 Interface de usuário CSS3 box Dimensionamento CSS3 Flexbox CSS3 Consultas de mídia CSS3 Exemplos MQ

CSS Web design responsivo

Web design responsivo Intro Web design responsivo Janela de exibição Web design responsivo Grid View Web design responsivo Consultas de mídia Web design responsivo imagens Web design responsivo vídeos Web design responsivo Frameworks

CSS Examples

CSS Exemplos CSS Questionário CSS Certificado

CSS References

CSS Referência CSS seletores CSS Funções CSS Aural referência CSS Web Safe fontes CSS Animatable CSS Unidades CSS PX-EM conversor CSS cores CSS Valores de cor CSS Nomes das cores CSS3 Suporte a navegadores

 

CSS animações


CSS3 animações

animações CSS3 permite animação da maioria dos elementos HTML sem o uso de JavaScript ou Flash!

CSS3
Animação

Suporte navegador para animações

Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.

Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.

Propriedade
@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-

Quais são CSS3 animações?

Uma animação permite que um elemento mudar gradualmente a partir de um estilo para outro.

Você pode mudar quantas propriedades CSS que quiser, quantas vezes quiser.

Para usar animação CSS3, você deve primeiro especificar alguns quadros-chave para a animação.

Keyframes manter o que os estilos o elemento terá em determinados momentos.


O @keyframes Regra

Ao especificar estilos CSS dentro do @keyframes regra, a animação vai mudar gradualmente a partir do estilo atual para o novo estilo em determinados momentos.

Para se ter uma animação para o trabalho, você deve ligar a animação a um elemento.

O exemplo a seguir vincula o "exemplo" de animação ao <div> elemento. A vontade de animação tem a duração de 4 segundos, e ele irá gradualmente mudar a cor de fundo do <div> elemento de "vermelho" para "amarelo":

Exemplo

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Tente você mesmo "

Nota: Se a animation-duration propriedade não for especificada, a animação não terá nenhum efeito, porque o valor padrão é 0.

No exemplo acima, temos especificado quando o estilo vai mudar usando as palavras-chave "from" e "to" (que representa 0% (início) e 100% (completo)).

Também é possível utilizar por cento. Usando por cento, você pode adicionar quantos mudanças no estilo de como você gosta.

O exemplo a seguir irá alterar a cor de fundo do <div> elemento quando a animação é de 25% completo, 50% completo, e novamente quando a animação está 100% concluída:

Exemplo

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Tente você mesmo "

O exemplo a seguir irá alterar tanto o background-color e da posição do <div> elemento quando a animação é de 25% completo, 50% completo, e novamente quando a animação está 100% concluída:

Exemplo

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Tente você mesmo "

Retardar uma animação

A animation-delay propriedade especifica um atraso para o início de uma animação.

O exemplo que se segue tem um atraso de 2 segundos, antes de iniciar a animação:

Exemplo

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
Tente você mesmo "

Definir Quantas vezes uma animação deve ser executado

A animation-iteration-count propriedade especifica o número de vezes que uma animação deve ser executado.

O exemplo a seguir irá executar a animação 3 vezes antes de parar:

Exemplo

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
Tente você mesmo "

O exemplo a seguir usa o valor " infinite " para fazer a animação continuará para sempre;

Exemplo

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
Tente você mesmo "

Executar Animação em sentido inverso, ou ciclos alternados

A animation-direction propriedade é usada para permitir que um prazo de animação em sentido inverso, ou ciclos alternados.

O exemplo a seguir irá executar a animação em sentido inverso:

Exemplo

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
Tente você mesmo "

O exemplo a seguir usa o valor "alternate" para fazer a animação primeiro correr para a frente, depois para trás, depois para a frente:

Exemplo

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
Tente você mesmo "

Especifique o Curve velocidade da animação

A animation-timing-function propriedade especifica a curva de velocidade da animação.

A propriedade-timing-function animação pode ter os seguintes valores:

  • ease - especifica uma animação com um início lento, em seguida, rapidamente, em seguida, terminar lentamente (este é o padrão)
  • linear - especifica uma animação com a mesma velocidade do início ao fim
  • ease-in - especifica uma animação com um início lento
  • ease-out - especifica uma animação com um final lento
  • ease-in-out - especifica uma animação com um início lento e no final
  • cubic-bezier(n,n,n,n) - permite definir seus próprios valores em uma função cúbica-bezier

O exemplo a seguir mostra a algumas das diferentes curvas de velocidade que podem ser utilizados:

Exemplo

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Tente você mesmo "

Animação Taquigrafia Property

O exemplo abaixo utiliza seis das propriedades de animação:

Exemplo

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
Tente você mesmo "

O mesmo efeito de animação como acima pode ser alcançado utilizando a forma abreviada animation propriedades:

Exemplo

div {
    animation: example 5s linear 2s infinite alternate;
}
Tente você mesmo "

Teste-se com exercícios!

Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6»


Propriedades CSS3 Animação

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

Propriedade Descrição
@keyframes Especifica o código de animação
animation Um atalho para definir todas as propriedades de animação
animation-delay Especifica um atraso para o início de uma animação
animation-direction Especifica se uma animação deve desempenhar no sentido inverso, ou ciclos alternados
animation-duration Especifica quantos segundos ou milissegundos uma animação leva para completar um ciclo
animation-fill-mode Especifica um estilo para o elemento quando a animação não está jogando (quando ele for concluído, ou quando ele tem um atraso)
animation-iteration-count Especifica o número de vezes que uma animação deve ser jogado
animation-name Especifica o nome do animação @keyframes
animation-play-state Especifica se a animação está em execução ou em pausa
animation-timing-function Especifica a curva de velocidade da animação