html - css3两个keyframe为什么不能同时执行？

Question

如题，我写了两个css3 animation动画，一个闪光，一个横向颤动，代码如下。

    .flash{
        -webkit-animation: neon2 1s ease-in-out infinite alternate;
        -moz-animation: neon2 1s ease-in-out infinite alternate;
        animation: neon2 1s ease-in-out infinite alternate;
    }
    
    .shake-horizontal {
        transform-origin: center center;
        -webkit-animation: shake-horizontal 200ms ease-in-out 3;
        -moz-animation: shake-horizontal 200ms ease-in-out 3;
        animation: shake-horizontal 200ms ease-in-out 3;
    }
    
    @-webkit-keyframes neon2 {
    from {
        text-shadow: 0 0 8px #fff,
        0 0 24px  #fff,
        0 0 32px  #228DFF,
        0 0 35px  #228DFF,
        0 0 40px #228DFF;
    }
    to {
        text-shadow: 0 0 4px #fff,
        0 0 12px #fff,
        0 0 16px #228DFF,
        0 0 20px #228DFF,
        0 0 24px #228DFF;
    }
}

@-webkit-keyframes shake-horizontal {
    10% {
        transform: translate(-10px, 0); }
    20% {
        transform: translate(0px, 0); }
    30% {
        transform: translate(8px, 0);}
    40% {
        transform: translate(0px, 0);}
    50% {
        transform: translate(-6px, 0);}
    60% {
        transform: translate(0px, 0);}
    70% {
        transform: translate(4px, 0);}
    80% {
        transform: translate(0px, 0); }
    90% {
        transform: translate(-2px, 0);}
    0%, 100% {
        transform: translate(0, 0) rotate(0deg); }
}

html：

<p class="show">完成</p>

测试：
1.给元素直接单独添加flash或shake-horizontal然后刷新页面，分别可以生效，同时添加这两个class，只有颤动效果。。
2.用js控制

   $('#show').addClass('flash shake-horizontal');
    setTimeout(function(){$('#show').removeClass('shake-horizontal')},1000);

先颤动，然后闪光。。
这是什么原因？我想要先同时颤动加闪光，1秒后颤动停止。

Answer 1

Two animation class name calls are equivalent to the animation attribute appearing in your tag at the same time. Then the latter className should overwrite the className in the previous animation, so , what you see is an animation effect.

If you want two effects to exist at the same time, then you can write all the animation effects in one keyframes. For example, your neon2 class is in the form of from and to, and shake-horizontal is in the form of 0 to 100, so combine it and process them all in the form of 0 to 100, and put them in one className.

If there is a sequence, one of them may be used later, and you don’t want to rewrite it, but just want to call it temporarily, then the only way is to use setTimeout after the end of the first animation This className is given to remove, and at the same time the addClass second animation effect comes in.