Question

我在同一个元素中有两个CSS动画，它们彼此冲突。我已经看到其他答案，如果用逗号分隔，你可以分配多个动画，但这些例子用于速记动画分配。有没有办法让这两个动画一起工作？：

.whiteLayer{
-webkit-transform: scale(0);
transform: scale(0);
margin-top: 50px;
border-radius: 50%;
width: 475px;
height: 475px;
border: 1px dashed white;
position: absolute;
top: 12px;
margin-left: 8px;
-webkit-animation-name: spin;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: running;
-webkit-animation-delay: 2s;
animation-name: spin;
animation-duration: 60s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 2s;


-webkit-animation-name: intro;
-webkit-animation-duration: .2s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: .2s;
-webkit-animation-fill-mode:forwards;
animation-name: intro;
animation-duration: .2s;
animation-timing-function: linear;
animation-delay: .2s;
animation-fill-mode:forwards;


}

@-webkit-keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes intro{
from {transform: scale(0);}
to {transform: scale(1);}
}

@keyframes intro {
from {transform: scale(0);}
to {transform: scale(1);}

请告诉我。谢谢！

Answer 1

我对此的解决方案是创建两个div（或一个额外的div来包装当前元素）并将另一个设置为第一个等等。他们会在不同的div上，但看起来他们只是一个人。

可能需要一些保证金/填充探测才能将它排成一行。

Answer 2

在上面的例子中，底部的动画将覆盖顶部的动画。这就是css的工作方式。如果你想让两个动画一起工作，你需要在一个动画中同时应用两个变换属性，即在同一个动画中应用缩放和旋转。

我在这个jsfiddle中设置了一个演示 - http://jsfiddle.net/gkueL/1/

.whiteLayer{
    background-color:red;
    -webkit-transform: scale(0);
    margin-top: 5px;
    width: 275px;
    height: 275px;
    border: 1px dashed white;
    position: absolute;
    margin-left: 8px;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 60s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
    -webkit-animation-delay: 0.5s;
}

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg) scale(0);}
    to {-webkit-transform: rotate(360deg) scale(1);}
}

是否有可能让这两个CSS动画相互合作？

2 个答案: