Question

当我使用CSS3动画在两个图像之间无限地改变背景时，即使我使用步骤（2），图像也会有褪色效果： http://jsfiddle.net/exdestroyer/hmb2m8ty/`

body{
        background: purple;
    }
        .rabbit{

            width: 130px; 
            height: 224px;
            background-size: 100%;
            animation: jump 2s infinite steps(2);
        }
        @keyframes jump{
            from{
                background: url(http://segmentfault.com/img/bVp56q);background-size: 100%;
            }
            to{
                background: url(http://segmentfault.com/img/bVp56r);background-size: 100%;
            }
        }`

那么如何解决问题并消除影响？

Answer 1

我认为有两种方法可以解决它。

首先在动画中使用转换：

div {
    transition: <property> <duration> <timing-function> <delay>;
}

秒使用旋转过渡的图像而不是关键帧中的两个图像。

Answer 2

你不应该通过CSS动画background-image。它不在CSS规范中，并且在非Webkit浏览器中不起作用。您可能正在使用Chrome进行测试，但如果您使用Firefox，Edge等进行测试，则会看到屏幕上没有显示背景。

Answer 3

为什么会这样？

当您设置动画时，初始关键帧是一个图像，最后一个是另一个图像，只有那些关键帧有一个图像。所有中间阶段都有不同程度的一个，与另一个混合。

设置步骤（2）使动画仅使用其中2个中间值。一个将是一个坚实的形象。但另一方将拥有50％的另一方和50％的另一方。

如果你想要这样的动画，只使用2个值，你需要在关键帧的中间设置一个根本性的变化

＆＃13;

body{
	background: purple;
}
.rabbit{
	width: 130px; 
	height: 224px;
	background-size: 100%;
	animation: jump 2s infinite;
}

@keyframes jump{
	0%, 49.9% {
		background: url(http://segmentfault.com/img/bVp56q);background-size: 100%;
	}
	50%, 100% {
			background: url(http://segmentfault.com/img/bVp56r);background-size: 100%;
	}
}

＆＃13;

<div class="rabbit"></div>

＆＃13;

除此之外，请注意支持动画背景图像更改仍然很弱

使用css3动画更改背景图像时为什么会出现淡入淡出效果？

3 个答案: