J'ai besoin de changer la couleur des élémentsautomatiquement à courir indéfiniment, avec le code suivant réalisant l'effet que je veux, mais seulement quand la souris passe à travers l'élément (div). Comment puis-je faire pour que cela change toujours la couleur?
Merci et salutations.
.box{
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
transition:background-color 3s linear;
-webkit-transition:background-color 3s linear;
-o-transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-ms-transition: background-color 3s linear;
}
.box:hover{
background-color: #090;
}
Réponses:
3 pour la réponse № 1Vous pouvez le faire avec Images clés CSS.
@keyframes changeColor {
0% {
background-color: #900;
}
50% {
background-color: #090;
}
100% {
background-color: #900;
}
}
.box {
animation-name: changeColor;
animation-iteration-count: infinite;
animation-duration: 3s;
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
}
<div class="box"></div>
1 pour la réponse № 2
Vous pouvez obtenir cet effet en utilisant une animation CSS (images clés). lis le ici
.box {
background-color: #900;
height: 50px;
width: 100px;
padding: 1em;
color: #fff;
font-weight: bold;
transition: background-color 3s linear;
-webkit-transition: background-color 3s linear;
-o-transition: background-color 3s linear;
-moz-transition: background-color 3s linear;
-ms-transition: background-color 3s linear;
}
@keyframes hoverme {
0% {
background-color: #900;
}
25% {
background-color: red;
}
50% {
background-color: green;
}
25% {
background-color: red;
}
100% {
background-color: #900;
}
}
.box:hover {
animation: hoverme 3s infinite;
}
<div class="box">
Hover me :)
</div>