为什么 CSS 动画不能像文本一样在链接（锚标签）上工作？答案

【问题标题】：Why CSS animation doesn't work on links (anchor tag) the same way as text?为什么 CSS 动画不能像文本一样在链接（锚标签）上工作？
【发布时间】：2015-11-10 07:59:40
【问题描述】：

我一直在玩一些 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>

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

结果：

p、div 或无标签内的文本会按照应有的方式从红色变为白色。但是锚标签内的文本没有。为什么锚标记的行为不同，我怎样才能让它按预期响应动画？

如果您添加a {color: inherit}，链接也会动画。但是，如果您只想定位链接或特定链接 - 将选择器更改为 #menu-list a ，那么只有未访问的链接才会动画：

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

【问题讨论】：

标签： css css-animations

【解决方案1】：

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

见：http://jsfiddle.net/gchqwnnb/

【讨论】：

感谢您的回复。我试过这个，但它似乎只适用于未访问的链接。查看编辑。
你可以将 :visited 添加到 a 标签中。

【解决方案2】：

a 元素默认从浏览器继承其颜色，因此如果您添加 inherit 值，它将从其父元素获取颜色。对于访问链接问题，您可以使用:visited。

将color:inherit; 添加到 a 元素。 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>

【讨论】：

感谢您的回复。你能看看修改后的结果吗？
这不起作用。如果我从父级中删除动画，并尝试仅将其应用于链接，则只有未访问的链接才会动画。即使我添加 a:visited 结果是一样的。
@Vlad 它在 Mozilla 中工作。我认为这是一个 Chrome 错误。

【解决方案3】：

由于向a:visited 添加动画不会为访问的链接设置动画，在没有更好的解决方案的情况下，使用感谢 alireza safian 和 M.Matias 的建议，我将建议以下解决方案来为链接设置动画：

为您的链接添加一个包装器。为包装标签设置动画。设置a {color: inherit}。

HTML：

  <!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>

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

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

结果：

【讨论】：