CSS3 - Animation
L'animation
est le processus de faire des changements de forme et de créer des mouvements
avec des éléments.
@ Keyframes
Les
images clés contrôleront les étapes d'animation intermédiaires dans CSS3.
Exemple
d'images clés avec animation à gauche :
@keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}
L'exemple
ci-dessus montre la hauteur, la largeur, la couleur, le nom et la durée de l'animation
avec la syntaxe des images clés
Déplacer
vers la gauche :
<html>
<head>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Exemple de l’ animation </h1>
<p> C'est un exemple de déplacement de l'animation à gauche.</p>
<button onclick="myFunction()">Rafraîchir la page </button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
Déplacement
de l'animation gauche avec des images-clés :
<html>
<head>
<style type="text/css">
h1 {
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-name: slidein;
-webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
@-webkit-keyframes slidein {
from {
margin-left:100%;
width:300%
}
75% {
font-size:300%;
margin-left:25%;
width:150%;
}
to {
margin-left:0%;
width:100%;
}
}
</style>
</head>
<body>
<h1>Exemple de l’animation </h1>
<p> Il s'agit d'un exemple d'animation laissé avec une image-clé
supplémentaire pour effectuer des modifications de texte.</p>
<button onclick="myFunction()">Rafraîchir la page </button>
<script>
function myFunction() {
location.reload();
}
</script>
</body>
</html>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Leave a Comment