css3两个keyframe为什么不能同时执行? -问答-阿里云开发者社区-阿里云

开发者社区> 杨冬芳> 正文

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

2016-06-20 14:33:56 1707 1

如题,我写了两个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秒后颤动停止。

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:44:06

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

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

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

    0 0
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64008浏览量 回答数 11

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 56716浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157051浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 92838浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 146753浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 145588浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85176浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80097浏览量 回答数 13

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67353浏览量 回答数 14

2

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48509浏览量 回答数 2
+关注
杨冬芳
IT从业
1
文章
9167
问答
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载