为什么CSS动画没有'；链接（锚定标签）的工作方式是否与文本相同？_Css_Css Animations

为什么CSS动画没有'；链接（锚定标签）的工作方式是否与文本相同？

css

为什么CSS动画没有'；链接（锚定标签）的工作方式是否与文本相同？,css,css-animations,Css,Css Animations,我一直在玩一些HTML和CSS动画。但锚定标签接缝的响应不同： HTML: <!DOCTYPE html> <html><head><title>Test</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body id="home&q

我一直在玩一些HTML和CSS动画。但锚定标签接缝的响应不同：

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>

@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;
}

结果：

p、div或no标记内的文本按其应有的颜色从红色振荡到白色。但锚定标记中的文本不会。为什么锚定标记的行为会有所不同，我如何才能让它响应预期的动画

如果您添加

a{color:inherit}

链接也将设置动画。但是，如果您只想将链接或特定链接作为目标-将选择器更改为

#菜单列表a

，则只有未访问的链接才会显示动画：

请您在提供解决方案时也解释一下这种行为。

默认情况下，

元素从浏览器继承其颜色，因此如果您添加

inherit

值，它将从其父元素获取其颜色。对于访问链接问题，您可以使用

：visted

添加

颜色：继承到a元素

@-webkit关键帧redtowhitetext{
0% {
颜色：红色；
}
50% {
颜色：白色；
}
100% {
颜色：红色；
}
}
@-moz关键帧redtowhitetext{
0% {
颜色：红色；
}
50% {
颜色：白色；
}
100% {
颜色：红色；
}
}
@-ms关键帧redtowhitetext{
0% {
颜色：红色；
}
50% {
颜色：白色；
}
100% {
颜色：红色；
}
}
@-o-关键帧redtowhitetext{
0% {
颜色：红色；
}
50% {
颜色：白色；
}
100% {
颜色：红色；
}
}
@关键帧redtowhitetext{
0% {
颜色：红色；
}
50% {
颜色：白色；
}
100% {
颜色：红色；
}
}
#菜单列表{
-webkit动画：redtowhitetext 3s无限；
-moz动画：redtowhitetext 3s无限；
-ms动画：redtowhitetext 3s无限；
-o动画：redtowhitetext 3s无限；
动画：redtowhitetext 3s无限；
}
A.
a:参观了{
颜色：继承；

试验

正文
正文


文本


文本

将a标记添加到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;
}

请参阅：
由于将动画添加到a:visted
不会为已访问的链接设置动画，在没有更好的解决方案的情况下，使用alireza safian和M.Matias的建议，我将建议以下解决方案来设置链接动画：
向链接添加包装。设置包装标签动画。设置a{color:inherit}

HTML:
结果：谢谢你的回复。你能看看修改后的结果吗。这不起作用。如果我从父级删除动画，并尝试将其仅应用于链接，则只有未访问的链接才会产生动画。即使我添加了：visted，结果也是一样的。@Vlad它在Mozilla中工作。我认为这是一个Chrome错误。谢谢你的回复。我已尝试此操作，但它仅适用于未访问的链接。请参见编辑。您可以将：visited添加到a标记中。
#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;
}

  <!DOCTYPE html>

<html><head><title>Test</title>
<link rel="stylesheet" type="text/css" href="menu-top.css"/>
</head>

<body id="home">

    <ul id="menu-list">
        <li class="home"><a href="#home">Home</a></li>
        <li class="about"><a href="#about">About</a></li>
        <li class="contact"><a href="#contactss">Contact</a></li>
    </ul>

</body></html>

@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;}}

.contact, .about {
    -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 {color: inherit;}