Diretório de artigos
prefácio
CSS3 fornece um efeito de animação muito conveniente. Atributo de animação (animação) usado principalmente e regra @keyframes. Vamos apresentar animação e @keyframes e como usá-los
提示：以下是本篇文章正文内容，下面案例可供参考
Um, atributo de animação (animação)
gramática
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Valor e descrição (link original)
2. Regras de @keyframes
Definição e uso
Com a regra @keyframes, você pode criar animações.
As animações são criadas mudando gradualmente um conjunto de estilos CSS para outro.
Durante a animação, você pode alterar esse conjunto de estilos CSS várias vezes.
Especifique quando a alteração ocorre em percentual, ou através das palavras-chave "from" e "to", que equivalem a 0% e 100%.
0% é a hora inicial da animação, 100% é a hora final da animação.
Para melhor suporte ao navegador, você deve sempre definir seletores de 0% e 100%.
Nota : Use as propriedades de animação para controlar a aparência da animação, ao vincular a animação ao seletor.
gramática
@keyframes animationname {
keyframes-selector {
css-styles;}}
Valor e descrição (link original)
3. Exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: heart 0.5s infinite;//一个叫heart的动画 每隔0.5s执行动画 无限次
}
@keyframes heart{
0%{
transform: scale(1);
}
50%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Gravação de tela QQ 20220505155643
Resumir
Este é o fim do compartilhamento, a chave para o efeito de animação do css é o atributo animation (animação) e o uso de @keyframes. Se este compartilhamento for útil para você, lembre-se de curtir ou comentar para obter feedback! ! ! Obrigado