Regra @keyframes do CSS

No CSS, a regra @keyframes pode ser usada para criar animações, criando animações através de mudanças progressivas de um estilo CSS para outro, durante o processo da animação, você pode alterar várias configurações do estilo CSS, a mudança especificada ocorre usando %, ou os termos "from" e "to", que são equivalentes a 0% até100% é o início da animação.100% é quando a animação é concluída. Para obter o melhor suporte do navegador, você deve sempre definir como 0% e10Seletor de 0%.

@keyframes规则是css3A regra @keyframes é uma nova regra do css 9e versões mais antigas dos navegadores. Novas regras adicionadas nele, atualmente todos os navegadores populares suportam essa regra (com o prefixo do navegador), mas não são compatíveis com o IE

Sintaxe de uso da regra @keyframes

A sintaxe dessa regra é a seguinte:

@keyframes　animationname　{keyframes-selector　{css-styles;}};

Descrição dos valores dos atributos

animationname：define o nome da animação;

keyframes-selector：percentual do tempo da animação, valores possíveis: 0-100%、from (é o mesmo que 0%)、to (é o mesmo que100% é o mesmo). Você pode usar um keyframe de animação-selectors；

css-styles ： um ou mais atributos de estilo CSS válidos;

O exemplo a seguir mostra a regra real do @keyframes.

　　　　　　.box　{
　　　　　　　　　　width:　50px;
　　　　　　　　　　height:　50px;
　　　　　　　　　　background:　red;
　　　　　　　　　　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%;}
　　　　　　}

Parâmetro

A tabela a seguir descreve os parâmetros dessa regra.

Compatibilidade do navegador

A compatibilidade do atributo @keyframes do navegador, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa regra.

Leia mais

Por favor, consulte o seguinte tutorial:Tipos de Mídia do CSS。