Css3背景图像动画动画太快

我想做一个css3动画多元素。
所有这些元素都有不同的背景图片并且它们必须在动画中间被替换。
事情是，我想使用相同的动画为所有元素。
这意味着，我不能在动画中写入原始背景图像。
但是，没有原始的背景图像使得背景图像与其他图像一起生成动画。

我想我会需要这样的东西：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");} 
}

来源

2013-04-24 Simon Arnold

我很困惑，问题是什么，但我会采取刺。如果你关掉51％的动画，那么它似乎会稍微好一些。它会缩小，直到它消失，然后回到背景图像淡入。

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

来源

2013-04-24 16:55:33 Fernker

一个posibility将具有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，使其更加明显。并且还定义了背景大小;在每一帧中重复它都不是必须的。

来源

2013-08-26 21:11:08 vals

Css3背景图像动画动画太快

回答

相关问题