Question

我正在尝试在多个元素上进行css3动画所有这些元素都有不同的背景图像，并且必须在动画中间替换它们问题是，我想对所有元素使用相同的动画 这意味着，我不能在动画中写出原始的背景图像但是，原始背景图像的缺失使得背景图像与其余图像一起生动。

我想我需要这样的东西：

background-image: default;

但我不认为它存在有人有想法吗？

示例：
http://jsfiddle.net/4SRrR/
（看看在div离开屏幕之前背景图像是如何开始淡入红色的。）

HTML

<div class="anim"></div>

的CSS：

.anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background-image: url("http://www.webdesign.org/img_articles/15485/Step1.png");
    -webkit-animation: anim .75s forwards ease-in;
}

@-webkit-keyframes anim {
    0% {-webkit-transform: translateX(0px);}
    50% {-webkit-transform: translateX(-400px);}
    51% {-webkit-transform: translateX(-400px); background-image: url("http://www.vt2k.com/processing/images/redball.jpg");}
    100% {-webkit-transform: translateX(0px); background-image: url("http://www.vt2k.com/processing/images/redball.jpg");}
}

Answer 1

一个可能性是拥有2个背景，然后在动画中只引用第一个和第二个的大小：

fiddle

CSS将是：

.anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background-image: url("http://www.webdesign.org/img_articles/15485/Step1.png"), url("http://www.vt2k.com/processing/images/redball.jpg");
    background-size: 100% 100%, 0% 100%;
    background-repeat: no-repeat;
    -webkit-animation: anim 7.5s forwards ease-in;

}

@-webkit-keyframes anim {
    0% {-webkit-transform: translateX(0px); background-size: 100% 100%, 0% 0%;}
    50% {-webkit-transform: translateX(-400px);background-size: 100% 100%, 0% 0%;}
    51% {-webkit-transform: translateX(-400px); background-size: 0% 0%, 100% 100%; }
    100% {-webkit-transform: translateX(0px);  background-size: 0% 0%, 100% 100%;}
}

我增加了过渡的duraion，使其更加明显。并且还过度定义了背景大小;在每一帧中重复它都不是必要的。

Answer 2

我很困惑这个问题是什么，但我会抓住它。如果你取消51％的动画，那么它似乎工作稍好一些。它会缩小，直到它消失，然后当它返回时，背景图像逐渐消失。

CSS3动画的一个难点在于，没有一种简单的方法可以判断动画何时完成50％。你可以做的是2个关键帧动画。使用JS，您可以收听第一个动画结尾。您可以添加背景图像，然后添加将触发动画第二部分的类。它不漂亮，但可以工作。

Css3背景图像动画太快了

2 个答案: