1

我正在尝试对多个元素进行 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");}
}
4

2 回答 2

1

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

小提琴

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%;}
}

我增加了过渡的持续时间，使其更加明显。并且还过度定义了背景大小；不必在每一帧中重复它。

于 2013-08-26T21:11:08.170 回答
0

我对问题是什么感到困惑，但我会尝试一下。如果你关闭 51% 的动画，那么它似乎会稍微好一点。它会缩小直到它消失，然后当它回来时背景图像淡入。

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

于 2013-04-24T16:55:33.920 回答