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

两个animation的类名调用，相当于你这个标签中同时出现了animation属性，那么应该就是会后面一个className覆盖了前面一个className中的animation，所以，你看到的就是一个动画效果。

如果你希望两个效果是同时存在的话，那么你可以在一个keyframes中把动画效果都写上，比如你的neon2这个类是from、to的形式，而shake-horizontal是从0到100的形式，那么就结合一下，都用0到100的形式来处理，放在一个className中。

如果是有先后顺序，后面可能会用到其中一个，而你又不想重写，只是想临时调用的话，那么就只有通过setTimeout的方式，在第一个animation结束之后把这个className给remove了，同时再addClass第二个动画效果进来。