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

在没有看到您的组件中可能应用了哪些其他样式的情况下，这是一种猜测，但是您不能将 CSS 动画添加到 inline 元素。如果您将 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>

CSS3 动画在 Angular 组件中不工作

CSS3 animation not working inside Angular component

css

css-animations

angular-components

angular