Maison >interface Web >tutoriel HTML >CSS3 - @keyframes
CSS3 - @keyframes
- 零下一度original
- 2017-06-29 11:54:071539parcourir
Syntaxe
@keyframes animationname {keyframes-selector {css-styles;}}| 值 | 描述 |
| animationname | 必需。定义动画的名称。 |
| keyframes-selector |
必需。动画时长的百分比。 合法的值：
|
| 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>
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!