CSS3 Animações (Animations)

CSS3A função de animação permite que você crie animações de frames-chave.

Crie CSS3Animação

No capítulo anterior, você já aprendeu como executar animações simples, por exemplo, através do CSS3A função de transição anima propriedades de um valor para outro. No entanto, o CSS3A transição é quase impossível de controlar como a animação varia ao longo do tempo.

CSS3A animação vai além das animações baseadas em chaves, permitindo que você especifique a variação do CSS ao longo do tempo em um conjunto de chaves, como animações Flash.

Criar uma animação CSS é um processo de dois passos, como mostrado no exemplo a seguir:

• O primeiro passo para construir uma animação CSS é definir cada chaveframe e usar a declaração de chaveframe para nomear a animação.

• O segundo passo é usar animation-A propriedade name faz referência às chaves por nome e adiciona animation-duration e outras propriedades opcionaisPropriedades de animaçãopara especificar o comportamento da animação.

No entanto, antes de referenciar ou aplicar as regras de chaveframes, não é necessário definir as regras de chaveframes. O exemplo a seguir mostrará como usar CSS3A função de animação especificará<div>a animação de uma caixa de um local horizontalmente para outro local.

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: vermelho;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

Você deve especificar pelo menos dois atributos animation-name e animation-duration (maior que 0), para executar a animação. No entanto, todas as outrasPropriedades de animaçãosão opcionais, pois seus valores padrão não impedem a ocorrência da animação.

definir chaves

Chaves são usadas para especificar os valores das propriedades de animação em cada fase da animação. As chaves são definidas usandoRegras CSS-indicado por @keyframes. O seletor de regra de chaveframes começa com um percentual (%) ou palavras-chave de (igual a 0%) até (igual a100%）。 O seletor é usado para especificar a posição de construção da chave durante o processo de animação.

Os porcentagens representam a porcentagem da duração da animação, 0% representa o início da animação,100% representa o final.50% representa o meio, e assim por diante. Isso significa2s na animação.50% das chaves será a posição no meio da animação.1s。

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　margin:　100px;
　　　　background: vermelho;
　　　　position: relative;
　　　　left: 0;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left:　-50px;}
　　　　25% {left:　50px;}
　　　　37.5% {left:　-25px;}
　　　　50% {left:　25px;}
　　　　62.5% {left:　-10px;}
　　　　75% {left:　10px;}
}

Propriedades abreviadas de animação

A criação de animações requer muitas propriedades. No entanto, também é possível especificar todas as propriedades de animação em uma única propriedade, para reduzir o código.

A propriedade animation é uma propriedade abreviada, usada para definir todas as propriedades individuaisPropriedades de animação。Por exemplo：

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: vermelho;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation: repeatit　2s linear 0s infinite alternate;
　　　　
　　　　animation: repeatit　2s linear 0s infinite alternate;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

CSS3Atributos de Animação

A tabela a seguir resume brevemente todas as propriedades relacionadas a animações.