CSS3 - @keyframes-tutoriel HTML-php.cn

CSS3 - @keyframes

零下一度

Libérer： 2017-06-29 11:54:07

original

1556 Les gens l'ont consulté

Syntaxe

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

Copier après la connexion

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。合法的值： 0-100% from（与 0% 相同） to（与 100% 相同）
css-styles	必需。一个或多个合法的 CSS 样式属性。

Définition et utilisation

Avec la règle @keyframes, vous pouvez créer des animations.

Les animations sont créées en changeant progressivement un ensemble de styles CSS en un autre.

Vous pouvez modifier cet ensemble de styles CSS plusieurs fois au cours de l'animation.

Précisez l'heure à laquelle le changement se produit en 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 les sélecteurs 0 % et 100 %.

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

Prise en charge des navigateurs

Actuellement, les navigateurs ne prennent pas en charge les règles @keyframes.

Firefox prend en charge les règles alternatives @-moz-keyframes.

Opera prend en charge les règles alternatives @-o-keyframes.

Safari et Chrome prennent en charge les règles alternatives @-webkit-keyframes.

Exemple :

<!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; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}

@-moz-keyframes mymove{  /* Firefox */0%  
 {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}

@-webkit-keyframes mymove { /* Safari and Chrome */0%  
 {top:0px; left:0px; background:red;}25%  {top:0px; left:100px; background:blue;}50%  
 {top:100px; left:100px; background:yellow;}75%  
 {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}

@-o-keyframes mymove {/* Opera */0%   {top:0px; left:0px; background:red;}25%  
{top:0px; left:100px; background:blue;}50%  {top:100px; left:100px; background:yellow;}75%  
{top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}</style>
</head><body><p><b>注释：</b>本例在 Internet Explorer 中无效。</p><div></div>
</body>
</html>

Copier après la connexion

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!