CSS3动画在Angular组件中不起作用答案

【问题标题】：CSS3 animation not working inside Angular componentCSS3动画在Angular组件中不起作用
【发布时间】：2019-09-03 17:39:26
【问题描述】：

我一生都无法弄清楚为什么这不会触发，因为这是一件相当简单的事情。我有一个 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;
}

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

【问题讨论】：

标签： angular css css-animations angular-components

【解决方案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>

【讨论】：