Qu'est-ce que @keyframes-tutoriel CSS-php.cn

Qu'est-ce que @keyframes

青灯夜游

Libérer： 2019-01-30 11:28:23

original

14260 Les gens l'ont consulté

@keyframes est une règle CSS qui peut être utilisée pour définir le comportement d'une période d'animation CSS et créer des animations simples.

Qu'est-ce que @keyframes

css @keyframes

Fonction : Avec la règle @keyframes, vous Possibilité de créer des animations.

Explication :

Le principe de la création d'une animation est de changer progressivement un ensemble de styles CSS en un autre ensemble de styles. Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation. Précise quand le changement se produit sous forme de pourcentage, ou via les mots-clés « de » et « à », qui sont équivalents à 0 % et 100 %. 0% est l'heure de début de l'animation, 100% est l'heure de fin de l'animation. Pour une meilleure prise en charge du navigateur, vous devez toujours définir des sélecteurs 0 % et 100 %.

Remarque : veuillez utiliser la propriété animation pour contrôler l'apparence de l'animation et lier l'animation au sélecteur.

Exemple d'utilisation de css @keyframes

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
25%  {top:200px;}
75%  {top:50px}
100% {top:100px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>

Copier après la connexion

Rendu :

Quest-ce que @keyframes

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!