for some reason, the @keyframes rule won't work for me can someone please tell me where I am going wrong.
the only fix I can think of is -webkit- but that doesn't seem to help at all.
.keyframe {
height: 15px;
width: 50px;
background-color: red;
-webkit-transition: width 4s;
}
.keyframe:hover {
width: 250px;
}
@-webkit-keyframes keyframe {
0% {
-webkit-background-color: red;
}
50% {
-webkit-background-color: yellow;
}
70% {
-webkit-background-color: blue;
}
100% {
-webkit-background-color: green;
}
}<div class="keyframe"></div>I was expecting the colour to change as the bar progressed to the maximum width, however, the bar does not change colour at all.
You need to specify the animation that will be called inside the :hover
also, add to the animation property the forwards key, to make it stop on the end of the animation (then it doesn't return to red). (I removed the -webkit from the CSS, because I don't think it is really necessary)
My tip also is to change the name of keyframe to something that specify what the animation do, like change-bgColor or similar.
.keyframe {
height: 15px;
width: 50px;
background-color: red;
-webkit-transition: width 4s;
}
.keyframe:hover {
width: 250px;
animation: change-bgColor 4s linear forwards;
}
@keyframes change-bgColor {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
70% {
background-color: blue;
}
100% {
background-color: green;
}
}<div class="keyframe"></div>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments