De estudos anteriores, sabemos que a animação de transição simples pode ser obtida usando o atributo de transição, mas a animação de transição só pode especificar os estados inicial e final. Todo o processo é controlado por uma função específica, que não é muito flexível. Nesta seção apresentaremos uma animação mais complexa - animação.
Animação: Semelhante à transição, alguns efeitos dinâmicos podem ser alcançados. A diferença é que a transição precisa ser acionada quando um determinado atributo muda, enquanto os efeitos de animação podem acionar automaticamente efeitos dinâmicos. Para definir efeitos de animação, você deve primeiro definir um quadro-chave. Os quadros-chave definem cada etapa da execução da animação. O formato das configurações do quadro-chave é o seguinte:
<style>/*Definir quadros-chave de animação O nome do quadro-chave é test*/@keyframestest{/*from indica a posição inicial da animação, que também pode ser expressa em 0%. */from{margin-left:0;}/*to indica a posição final da animação, que também pode ser expressa em 100%. */to{margem-esquerda:100%;}}</style>A animação em CSS é semelhante à animação quadro a quadro em flash. É delicada e muito flexível. O uso de animação em CSS pode substituir imagens dinâmicas, animação em Flash ou efeitos especiais implementados em JavaScript em muitas páginas da web.
A animação é o efeito de mudar gradualmente um elemento de um estilo para outro. Podemos mudar quantos estilos quisermos e quantas vezes quisermos (resposta muito oficial).
Propriedade CSS3animation (animação).
@quadros-chave
Com a regra @keyframes podemos criar animações.
As animações são criadas mudando gradualmente um conjunto de estilos CSS para outro. Podemos alterar esse conjunto de estilos CSS várias vezes durante a animação. Especifique o horário em que ocorre a alteração em forma percentual, ou através das palavras-chave “de” e “até”, que equivalem a 0% e 100%.
0% é o horário de início da animação, 100% é o horário de término da animação. Para melhor suporte ao navegador, devemos sempre definir seletores de 0% e 100%. Aqui 0% é um quadro, 50% é um quadro e 100% também é um quadro.
Finalmente, use as propriedades da animação para controlar a aparência da animação e vinculá-la ao seletor
nome da animação obrigatório. Define o nome da animação.
seletor de quadros-chave necessário. Valores legais para a porcentagem de duração da animação: 0-100% de (igual a 0%) a (igual a 100%)
estilos CSS necessários. Uma ou mais propriedades legais de estilo CSS
Por exemplo:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;le ft:100px;background:yellow;}75%{top:100px;left:0px;background:green;}100%{top:0px;left:0px;background:red;}}1. Atributo de nome de animação: Defina o nome da animação que precisa ser vinculado ao elemento.
O atributo Animation-Name é usado para vincular a animação ao elemento HTML especificado. Os valores opcionais do atributo são os seguintes:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;esquerda:0px;}100%{top:0px;esquerda :0px;}}div{largura:100px;altura:100px;raio da borda:50%;borda:3pxsolidblack;posição:relativa;nome da animação:bola;}</style></head><body><div </div></body></html>Resultados em execução:
Nota: Para que a animação seja reproduzida com sucesso, você também precisa definir o atributo de duração da animação. Caso contrário, a animação não será reproduzida porque o valor padrão do atributo de duração da animação é 0.
2. Atributo de duração da animação: Define quantos segundos ou milissegundos leva para a animação completar um ciclo.
● tempo: Especifique o tempo que leva para a animação ser concluída. O valor padrão é 0, o que significa nenhum efeito de animação.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left :350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{ largura:100px;altura:100px;raio da borda:50%;borda:3pxsolidblack;posição:relativa;nome da animação:bola;duração da animação:2s;}</style></head><body><div> </div></body></html>3. função de temporização de animação: A função matemática usada é chamada de curva cúbica de Bezier e curva de velocidade. Usando esta função, você pode usar seu próprio valor ou um dos valores predefinidos.
●linear: A velocidade da animação é a mesma do começo ao fim;
●facilidade: Padrão. A animação começa baixa, depois acelera e desacelera antes de terminar;
●ease-in: A animação começa em baixa velocidade;
●ease-out: A animação termina em baixa velocidade;
●ease-in-out: A animação começa e termina em baixa velocidade;
●cubic-bezier (n,n,n,n): Use a função cube-bezier() para definir a velocidade de reprodução da animação. O intervalo de valores do parâmetro é um valor entre 0 e 1.
4. Atributo de atraso de animação: define quando a animação começa.
●tempo: opcional. Define o tempo, em segundos ou milissegundos, de espera antes do início da animação. O valor padrão é 0.
Nota: A unidade pode ser segundos (s) ou milissegundos (ms).
5. Atributo de contagem de iterações de animação: Define quantas vezes a animação deve ser reproduzida.
Os valores opcionais para o atributo são os seguintes:
6. Atributo de direção de animação: Define se a animação deve ser reproduzida ao contrário em um loop.
●normal: valor padrão. A animação é reproduzida normalmente;
●reverso: a animação é reproduzida ao contrário;
●Alternativo: A animação avança nos números ímpares (1, 2, 5...) e inverte nos números pares (2, 4, 6...);
●reverso alternativo: A animação é reproduzida na direção reversa nos tempos ímpares (1, 3, 5...) e na direção direta nos tempos pares (2, 4, 6...).
7. Atributo Animation-Fill-Mode: Especifica o estilo a ser aplicado ao elemento quando a animação não é reproduzida (quando a animação é concluída ou quando a animação tem um atraso antes de começar a ser reproduzida).
Observação: por padrão, as animações CSS não afetam um elemento até que o primeiro quadro-chave seja reproduzido e param de afetar o elemento após a conclusão do último quadro-chave. A propriedade Animation-Fill-Mode substitui esse comportamento.
●nenhum valor padrão. : a animação não aplicará nenhum estilo ao elemento de destino antes e depois da animação ser executada;
●forwards: Após o término da animação (determinado pela contagem de iterações de animação), a animação aplicará esse valor de atributo;
●para trás: A animação aplicará os valores de propriedade definidos no quadro-chave que iniciou a primeira iteração da animação durante a definição do atraso da animação. Esses são valores no quadro-chave from (quando a direção da animação é "normal" ou "alternativa") ou no quadro-chave to (quando a direção da animação é "reversa" ou "reversa alternativa");
●Ambas as animações seguem as regras de avanço e retrocesso. Ou seja, a animação expande a propriedade da animação em ambas as direções.
8.animation-play-state: Especifica se a animação está em execução ou pausada.
●paused: Especifica pausar a animação;
●running: Especifique a animação em execução.
9. inicial: Defina a propriedade com seu valor padrão.
●initial: palavra-chave é usada para definir as propriedades CSS com seus valores padrão;
●inicial: a palavra-chave pode ser usada para qualquer atributo CSS em qualquer elemento HTML.
10. herdar: herda atributos de elementos pais.
●herdar: palavra-chave especifica que um atributo deve herdar seu valor do elemento pai;
●herdar: a palavra-chave pode ser usada para qualquer atributo CSS em qualquer elemento HTML.
animação
O atributo de animação é a abreviatura de nome da animação, duração da animação, função de temporização da animação, atraso da animação, contagem de iterações da animação, direção da animação, modo de preenchimento da animação, estado de reprodução da animação, através da animação O atributo pode definir vários dos atributos acima ao mesmo tempo. O formato da sintaxe é o seguinte:
animação:animação-nomeanimação-duraçãoanimação-tempo-funçãoanimação-atrasoanimação-iteração-contagemanimação-direçãoanimação-modo de preenchimentoanimação-estado de reprodução;
Cada parâmetro corresponde a cada atributo apresentado acima. Se um ou mais valores forem omitidos, será utilizado o valor padrão correspondente ao atributo.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>animação</title><style>.box1{largura:700px;altura:500px;cor de fundo:prata;}. box2{largura:100px;altura:100px;cor de fundo:#bfa;margem esquerda:10px;/*nome da animação:teste;*//*duração da animação:4s;*//*animat função de temporização de íons:linear;*//*contagem de iterações de animação:4;*//*direção de animação:alternativa;*//*modo de preenchimento de animação:para trás ;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*Defina os quadros-chave da animação, o nome do quadro-chave é test*/@keyframestest{/*from indica a posição inicial da animação, você também pode usar 0% para expressar. */from{margin-left:50px;background-color:orange;}/*to indica a posição final da animação, que também pode ser expressa em 100%. */to{margin-left:600px;background-color:yellow;}}/*Controle a execução da animação*//*.box1:hover.box2{animation-play-state:paused;}*/</style > </head><body><div><div></div></div></body></html>