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 Dev工具，我可以看到它在樣式標簽中輸出以下內容：

@-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元素中。 如果在<a>標簽上添加display: inline-block或position: absolute ，它將起作用：

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