CSS3 动画在 Angular 组件内不起作用

Question

我一生都无法弄清楚为什么这没有触发，因为这是一件相当简单的事情。我有一个 Angular 组件，仅包含以下内容：

<a href="#services">Click</a>

在相应组件的CSS中，我有这样的：

@keyframes bounce{
    0% { transform: translateY(0px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0px); }
}
a{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    animation: bounce 1.5s infinite;
}

使用 Chrome 开发工具，我可以看到它在样式标签中输出以下内容：

@-webkit-keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
a[_ngcontent-c3]{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-animation: bounce 1.5s infinite;
            animation: bounce 1.5s infinite;
}

一切似乎都指向正确的元素，但动画根本不起作用。有什么想法吗？

Answer 1

这只是一种猜测，没有看到哪些其他样式可以应用在您的组件中，但您无法向inline元素添加 CSS 动画。如果将display: inline-block或添加position: absolute到<a>标签，它将起作用：

@-webkit-keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
a[_ngcontent-c3]{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-animation: bounce 1.5s infinite;
            animation: bounce 1.5s infinite;
}

a.inline-block {
    display: inline-block;
}

<a href="#services" _ngcontent-c3>Click</a> &lt;= not working | working with <code>display: inline-block;</code> =&gt;
<a href="#services" _ngcontent-c3 class="inline-block">Click</a>