开发者社区> 问答> 正文

css3两个keyframe为什么不能同时执行?

如题,我写了两个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:

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

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

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

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

展开
收起
杨冬芳 2016-06-20 14:33:56 2683 0
1 条回答
写回答
取消 提交回答
  • IT从业

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

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

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

    2019-07-17 19:44:06
    赞同 展开评论 打赏
问答分类:
问答地址:
相关产品:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载