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

Question

Can't for the life of me figure out why this isn't triggering as it's a rather simple thing. I have an Angular component that simply contains the following:

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

In the corresponding component's CSS, I have this:

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

Using Chrome Dev tools I can see that it outputs the following in a style tag:

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

Everything appears to be pointing to the correct element, but the animation isn't working at all. Any thoughts?

Answer 1

It's rather a guess without seeing which other styles may be applied in your component, but you cannot add CSS animations to inline elements. If you add display: inline-block or position: absolute to the <a> tag, it will work:

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