Faire un bouton qui change de couleur:
Pour créer une animation sur 3 temps et plus, seul les pourcentages pourront être utilisés. C’est le cas de cet exemple où le bouton ci-dessous change de couleur plusieurs fois.
Code source coté HTML
<!-- /button -->
<div id="button">
<p id="text-button">Bouton</p>
</div>
Code source coté CSS
#button
{
height: auto;
width: 70px;
padding-left: 30px;
padding-right: 30px;
border-style: solid;
border-width: 1px;
animation-name: cameleon;
animation-duration: 5s;
animation-iteration-count: infinite;
}
p#text-button
{
color: #00d008;
font-size: bold;
padding: 10px;
width: 10%;
text-align: center;
}
@keyframes cameleon
{
0% {background-color: #0044e3;}
30% {background-color: white;}
60% {background-color: #d60000;}
100% {background-color: #0044e3;}
}
