提问者:小点点

多个关键帧动画在safari中不工作


我正在工作的HTML5横幅有很多CSS3动画。为了制作可重用的关键帧动画,我在单个元素上使用了多个动画。除了Safari之外一切都很顺利。

CSS:

.text1 {
    -webkit-animation: fadeOutRight 1s 3s forwards;
    animation: fadeOutRight 1s 3s forwards;
}
.text2 {
    -webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
    animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
    -webkit-animation: fadeInLeft 1s 8s both;
    animation: fadeInLeft 1s 8s both;
}

/* fadeInLeft */
@-webkit-keyframes fadeInLeft {
    0% { -webkit-transform: translateX(-100px); opacity: 0; }
    100% { -webkit-transform: translateX(0px); opacity: 1; }
}
@keyframes fadeInLeft {
    0% { transform: translateX(-100px); opacity: 0; }
    100% { transform: translateX(0px); opacity: 1; }
}

/* fadeOutRight */
@-webkit-keyframes fadeOutRight {
    0% { -webkit-transform: translateX(0px); opacity: 1; }
    100% { -webkit-transform: translateX(100px); opacity: 0; }
}
@keyframes fadeOutRight {
    0% { transform: translateX(0px); opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

jsfiddle链接

可行的解决方案:

  1. 用另一个/更多元素包装该元素&为每个元素添加单个动画。此解决方案需要为包装器元素设置额外的样式。
  2. 将多个动画合并为一个&此解决方案增加了关键帧规则的复杂性,并且对于复杂的动画不容易维护。
  3. 根据另一个stackOverflow后的公认答案-您不能对同一元素上的同一属性进行多次动画,最后一个将覆盖其他。只有在我的例子中,safari才是真的&第一个动画只运行,而不是第二个。如果我没有在多个动画中动画相同的属性,那么对于safari(jsfiddle)也是很好的。这个不适合我,因为我将需要在多个动画中动画相同的属性。

注:

虽然我在同一个元素上使用了多个动画,但我不是同时动画,每个动画之间有延迟。

问题:

是否可以在同一元素上使用多个CSS3动画而不考虑动画属性?


共1个答案

匿名用户

出于某种原因,Safari没有通过描述动画的速记方法阅读,例如:

animation: test 1s 2s 3 alternate backwards

需要对其进行更详细的描述,并列出其单独的属性:

.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}