animations CSS3

CSS3, nous pouvons créer des animations qui peuvent remplacer de nombreuses pages d'images animées, des animations Flash et Javascripts.

CSS3
animation

CSS3 @keyframes règles

Pour créer des animations CSS3, vous aurez à apprendre les règles de @keyframes.

@keyframes règle est de créer une animation. Spécifiez un style CSS et de l'animation va progressivement changer pour le nouveau style du style actuel dans les règles de @keyframes.

support du navigateur

Les chiffres du tableau représentent le premier navigateur pour soutenir le numéro de version de la propriété.

Immédiatement après la -webkit- numérique, -ms- ou -moz- il y a à l'appui du préfixe d'attribut premier numéro de version 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-
animation	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-

Exemples

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

animations CSS3

Lors de la création @keyframes d'animation, le lier à un sélecteur, sinon l'animation n'a pas d' effet.

Indiquez au moins deux propriétés d'animation CSS3 est lié à un sélecteur:

Il spécifie le nom de l'animation
Quand une animation de longueur prédéterminée

Exemples

L'animation "MyFirst" lié à div élément Durée: 5 secondes:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Essayez »

Remarque: Vous devez définir la durée de l'animation et de l' animation nom.Si vous omettez la durée de l'animation ne fonctionnera pas parce que la valeur par défaut est 0.

Quelles animations CSS3 sont?

élément d'animation est de faire un changement progressif d'un style à un autre effet de style.

Vous pouvez changer autant de styles que de nombreuses fois.

S'il vous plaît utiliser le pourcentage de variation dans le temps imparti, ou mot-clé "de" et "à", équivalent à 0% et 100%.

0% correspond au début de l'animation, l'animation est complète à 100%.

Pour un meilleur support du navigateur, vous devez toujours définir le 0% et 100% du sélecteur.

Exemples

Changez la couleur d'arrière-plan lorsque l'animation est de 25% et 50%, et 100% terminée lorsque l'animation a changé à nouveau:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Essayez »

Exemples

Changez la couleur et l'emplacement de fond:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

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

Essayez »

propriétés d'animation CSS3

Le tableau suivant répertorie les règles de @keyframes et toutes les propriétés d'animation:

propriété	description	CSS
@keyframes	Provisions animation.	3
animation	propriété Raccourci pour toutes les propriétés de l'animation, en plus de la propriété jeu état d'animation.	3
animation-name	Indique l'animation nom @keyframes.	3
animation durée	Dispositions animation faut pour terminer un cycle de secondes ou en millisecondes. La valeur par défaut est 0.	3
animation-timing-function	Une vitesse prédéterminée de la courbe d'animation. La valeur par défaut est "facilité".	3
animation-delay	Quand une animation prédéterminée démarre. La valeur par défaut est 0.	3
animation-iteration-count	nombre de fois prédéterminé, l'animation est jouée. La valeur par défaut est 1.	3
animation-direction	Si les dispositions de l'animation à jouer en sens inverse pour le prochain cycle. La valeur par défaut est "normal".	3
état-animation-play	Si les dispositions de l'animation est en cours d'exécution ou en pause. La valeur par défaut est "en cours d'exécution".	3

Les deux exemples qui suivent présentent toutes les propriétés d'animation:

Exemples

Exécutez l'animation MyFirst, définir tous les attributs:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Essayez »