Menu
I have been playing with some HTML and CSS animations. But the anchor tag seams to respond differently:
HTML:
<!DOCTYPE html>
<html><head><title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body id="home">
<ul id="menu-list">
<p>text</p>
<li>text <a class="home" href="#home">Home</a></li>
<li><a class="about" href="#about">About</a></li>text
<li><a class="contact" href="#contacts">Contact</a></li>
<div>text</div>
</ul>
</body></html>
CSS:
@charset "utf-8";
@-webkit-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
@-moz-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
@-ms-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
@-o-keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
@keyframes redtowhitetext {0% {color: red;} 50% {color: white;} 100% {color: red;}}
#menu-list {
-webkit-animation: redtowhitetext 3s infinite;
-moz-animation: redtowhitetext 3s infinite;
-ms-animation: redtowhitetext 3s infinite;
-o-animation: redtowhitetext 3s infinite;
animation: redtowhitetext 3s infinite;
}
Result:
Text inside p, div or no tag oscillates from red to white color as it should. But text inside anchor tags doesn't. Why does the anchor tag behave differently and how can I get it to respond to animations as intended?
If you add a {color: inherit} the links will animate too. But if if you want to target links only or a specific link - change the selector to #menu-list a , then only links that were not visited will animate:
Can you please also explain this behavior when providing the solution.
576
Add the a tag to your css.
#menu-list,
#menu-list li a {
-webkit-animation: redtowhitetext 3s infinite;
-moz-animation: redtowhitetext 3s infinite;
-ms-animation: redtowhitetext 3s infinite;
-o-animation: redtowhitetext 3s infinite;
animation: redtowhitetext 3s infinite;
}
See : http://jsfiddle.net/gchqwnnb/
65
answered Nov 01 '25 08:11
The a element inherits its color from browser by default so if you add inherit value, it will get its color from its parent. For visited link problem you can use :visited.
Add color:inherit; to the a element. Jsfiddle
a,
a:visited
{
color: inherit;
}
@-webkit-keyframes redtowhitetext {
0% {
color: red;
}
50% {
color: white;
}
100% {
color: red;
}
}
@-moz-keyframes redtowhitetext {
0% {
color: red;
}
50% {
color: white;
}
100% {
color: red;
}
}
@-ms-keyframes redtowhitetext {
0% {
color: red;
}
50% {
color: white;
}
100% {
color: red;
}
}
@-o-keyframes redtowhitetext {
0% {
color: red;
}
50% {
color: white;
}
100% {
color: red;
}
}
@keyframes redtowhitetext {
0% {
color: red;
}
50% {
color: white;
}
100% {
color: red;
}
}
#menu-list {
-webkit-animation: redtowhitetext 3s infinite;
-moz-animation: redtowhitetext 3s infinite;
-ms-animation: redtowhitetext 3s infinite;
-o-animation: redtowhitetext 3s infinite;
animation: redtowhitetext 3s infinite;
}
a,
a:visited {
color:inherit;<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body id="home">
<ul id="menu-list">
<p>text</p>
<li>text <a class="home" href="#home">Home</a>
</li>
<li><a class="about" href="#about">About</a>
</li>text
<li><a class="contact" href="#contacts">Contact</a>
</li>
<div>text</div>
</ul>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
