Introduction aux images clés d'animation CSS3
Explication détaillée de l'utilisation de @keyframes en CSS3 :
Cet attribut est étroitement lié à l'attribut animation. Pour l'attribut animation, veuillez vous référer au chapitre ". Explication détaillée de l'utilisation de l'attribut d'animation en CSS3".
1. Connaissances de base :
les images clés traduites en chinois signifient "images clés". Si vous avez utilisé Flash, vous devriez mieux comprendre cela, mais bien sûr pas là. il n'y a pas non plus de problème avec le flash.
L'effet d'animation de transition peut également être obtenu en utilisant l'attribut de transition, mais il est légèrement approximatif car il ne peut pas contrôler le processus d'animation de manière plus précise. Par exemple, il ne peut contrôler globalement la transition d'un certain attribut au sein d'un. période de temps spécifiée, tandis que l'attribut d'animation Vous pouvez utiliser @keyframes pour diviser plus précisément l'animation dans une période de temps spécifiée.
Structure grammaticale :
@keyframes animationname {keyframes-selector {css-styles;}}Analyse des paramètres :
1.animationname : déclare le nom de l'animation.
2.keyframes-selector : utilisé pour diviser la durée de l'animation, vous pouvez utiliser le formulaire de pourcentage, ou vous pouvez utiliser les formulaires "de" et "à".
Les formes "de" et "à" sont équivalentes à 0% et 100%.
Il est recommandé de toujours utiliser la forme pourcentage.
2. Exemples de code :
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-moz-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-o-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
@-ms-keyframes theanimation{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus implémente une animation simple :
1. Utilisez la définition de @keyframes créée. une animation appelée theanimation.
2. Le nom de l'animation déclaré par @keyframes doit être utilisé en conjonction avec l'animation.
3. de à équivaut à 0% -100%, il est donc stipulé qu'une chose doit être faite dans les 5 secondes.
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
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 theanimation{
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 theanimation{
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 theanimation{
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>
<div></div>
</body>
</html>Dans le code ci-dessus, la durée de l'animation est divisée en pourcentages, stipulant que les choses spécifiées doivent être faites dans l'intervalle spécifié.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
