Comment puis - je utiliser CSS3 @keyframes règles dans cssref?

CSS3 @keyframes règles

Exemples

Faire un élément div se déplace progressivement 200 pixels:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

Essayez »
Dans le bas de cette page pour plus d'exemples.

support du navigateur

属性
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

définitions de balises et les instructions

Utilisez les règles de @keyframes, vous pouvez créer une animation.

Création d'animation en changeant progressivement le réglage d'un style CSS à l'autre.

Au cours de l'animation, vous pouvez changer les temps définir le style CSS.

L'utilisation se produit lors d'un changement spécifié dans%, ou mot-clé "de" et "à", et ceci est le 0% à 100% identiques.

0% correspond au début de l'animation, 100% lorsque l'animation est terminée.

Pour le support du navigateur optimal, vous devez toujours être définie comme 0% et 100% du sélecteur.

Remarque: Utilisez lapropriété d'animation pour contrôler l'apparence de l'animation est également utilisé pour sélectionner l' animation bind. .

grammaire

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

valeur	explication
animationname	Obligatoire. Définir le nom de l'animation.
keyframes-sélecteur	Obligatoire. La durée du pourcentage de l'animation. Valeur juridique: 0 à 100% de (et 0% d'identité) (et 100% d'identité) Remarque: Vous pouvez utiliser une animation keyframes-sélecteurs.
css-styles	Obligatoire. Un ou plusieurs attributs légitimes de style CSS

valeur

explication

animationname

Obligatoire. Définir le nom de l'animation.

keyframes-sélecteur

Obligatoire. La durée du pourcentage de l'animation.

Valeur juridique:

0 à 100%
de (et 0% d'identité)
(et 100% d'identité)

Remarque: Vous pouvez utiliser une animation keyframes-sélecteurs.

css-styles

Obligatoire. Un ou plusieurs attributs légitimes de style CSS

exemples en ligne

Exemples

Beaucoup du sélecteur d'images clés pour ajouter un film:

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

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

Essayez »

Exemples

Changer de nombreux styles CSS dans une animation:

@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

Essayez »

Exemples

De nombreux sélecteurs keyframe avec de nombreux styles CSS:

@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;}
}

@-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;}
}

Essayez »