CSS @keyframe not working
16,803
You are applying CSS, not JS. Just remove the quotation marks in your CSS and it will work like a charm.
.text {
display: block;
-webkit-animation: changeColor 5s infinite; /* Safari 4+ */
-moz-animation: changeColor 5s infinite; /* Fx 5+ */
-o-animation: changeColor 5s infinite; /* Opera 12+ */
animation: changeColor 5s infinite; /* IE 10+ */
}
@keyframes changeColor {
0% {
color: red;
}
100% {
color: blue;
}
}
@-moz-keyframes changeColor {
0% {
color: red;
}
100% {
color: blue;
}
}
@-webkit-keyframes changeColor {
0% {
color: red;
}
100% {
color: blue;
}
}
Author by
user2275231
Updated on June 14, 2022Comments
-
user2275231 almost 2 years
I have been going through examples and I've go to be missing something here. I can't get this simple css animation to fire, changing the color of some text. When I run the example below, the text stays black.
I have an animation named "changeColor", applied to class "text" for an h1 element. It will fade from one color to another over 5 second intervals.
<!DOCTYPE html> <html> <head> <style> .text{ display:block; -webkit-animation: changeColor 5s infinite; /* Safari 4+ */ -moz-animation: changeColor 5s infinite; /* Fx 5+ */ -o-animation: changeColor 5s infinite; /* Opera 12+ */ animation: changeColor 5s infinite; /* IE 10+ */ } @keyframes changeColor { 0% { color: 'red'; } 100% { color: 'blue'; } } @-moz-keyframes changeColor { 0% { color: 'red'; } 100% { color: 'blue'; } } @-webkit-keyframes changeColor { 0% { color: 'red'; } 100% { color: 'blue'; } } </style> </head> <body> <h1 class="text">Not Working</h1> </body> </html>