Les Animations
Création d'une animation
Code HTML :
<![CDATA[
<div style="animation-delay: 0.1s"></div>
<div style="animation-delay: 0.2s"></div>
<div style="animation-delay: 0.3s"></div>
<div style="animation-delay: 0.4s"></div>
<div style="animation-delay: 0.5s"></div>
<div style="animation-delay: 0.6s"></div>
<div style="animation-delay: 0.7s"></div>
<div style="animation-delay: 0.8s"></div>
<div style="animation-delay: 0.9s"></div>
<div style="animation-delay: 1s"></div>
]]>
Code CSS :
<![CDATA[
div{
background-color: grey;
width: 90px;
height: 20px;
animation: changeCouleur 2s infinite alternate; /*Mise en place de l'animation */
margin:auto;}
@keyframes changeCouleur{ /* @keyframes = étapes de l"animation */
0%{
background-color: red;
width: 100px;
transform: rotateZ(-10deg);
}
50%{
background-color: green;
}
100%{
background-color: blue ;
width: 500px;
transform: rotateZ(10deg);}
}
]]>