css3中animation可以同时加载2个动画吗？

Question

请问如何给一个div加载2个动画用css3

Answer 1

https://jsfiddle.net/ccchangk...

<img src="1.png" class="a1" />

第一一秒的透明度动画，第二是延迟一秒的一秒循环位移动画

    .a1 {
        animation: a1 1s,a2 1s infinite 1s;
    }
    
    @keyframes a1 {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    @keyframes a2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20%);
        }
        100% {
            transform: translateY(0);
        }
    }

Answer 2

以下为补充回答

我有一个div 刚开始opacity从0到1；然后使它做一个来回滑动的效果；这应该是2个分别的动画

答：
这虽然是两个动画，但无需用多个 animation 一个就可以实现了

示例代码

@keyframes demo{
    /* 可以指定多个属性动画 */
    0% { opacity: 0; transform: translate(0); }
    100% { opacity: 1; transform: translate(60px); }
}

div{
    animation: demo 1s ease 1 both;
}

参考文档：https://developer.mozilla.org...

Answer 3

同一个div加载两个动画也是有先后顺序的，你不如具体说说你想实现的效果

Answer 4

先说结论，如果我没有记错，可以同时加载两个不同名称的animation，

animation-name: 用,隔开两个不同的animation名称即可

链接： https://www.w3.org/TR/css3-an...

再说你的需求。

div 刚开始opacity从0到1；然后使它做一个来回滑动的效果；这应该是2个分别的动画

这个可以写成一个动画，别忘了 animation动画可以设置%的动画执行效果

@keyframes IDENT {
      0% {
         opacity: 0
      }
      50% {
         opacity: 1;
         left: 0;
      }
      100% {
         opacity: 1;
         left: 100;
      }
    }

大概就这个意思， 而且一个可以控制顺序和执行时间比例，两个你需要用到 delay属性，控制不好的话，容易卡顿。

Answer 5

可以同时加载放大和翻转动画效果

/* 放大+翻转 */
@keyframes flip
{
0% { 
  -webkit-transform: scale(0) rotateY(0deg) ;
  transform: scale(0) rotateY(0deg) ;
} 
100% {  
  -webkit-transform: scale(1) rotateY(360deg) ;
  transform: scale(1) rotateY(360deg) ;
}
}

@-webkit-keyframes flip /* Safari and Chrome */
{
0% { 
  -webkit-transform: scale(0) rotateY(0deg) ;
  transform: scale(0) rotateY(0deg) ;
} 
100% {  
  -webkit-transform: scale(1) rotateY(360deg) ;
  transform: scale(1) rotateY(360deg) ;
}
}

Answer 6

前面回答的都叫别人把动画写成一个，万一人家不想写成一个，想写动画效果的class分解怎么搞？
//明确的告诉提问者，不可以同时使用两个不同的keyframe-name.

---

更正一下，可以叠加不同的keyframe-name，只不过是要单独写出来。比如：
animation:1s infinite alternate;//这里没有申明关键帧名
animation-name:spark, flow;//同时浮动和闪动

Answer 7

我不知道你的这个动画是同时进行的动画还是什么，假如你有一个元素需要边放大边旋转，你可以用:before来给他们设置动画，这样子可以让动画同时进行，若是要不同时，那就都写在animation里，用逗号隔开就是了

Answer 8

#heart{
                display: block;
                width: 100px;
                height: 100px;
                margin: 100px auto;
                -webkit-animation: pone 1.5s linear infinite;
            }
            @keyframes pone{
                0%{
                    transform: none;
                }
                50%{
                    transform: scale(2.2) rotate(180deg);        
                }
                100%{
                    transform: scale(1) rotate(360deg);    
                }
            }

例如这种吗？ 同时实现放大及旋转效果的双重动画？