javascript - 为什么用css3动画换背景图片会出现淡出效果？

Question

当我使用CSS3动画在两张图片之间无限变换背景时，即使我使用steps(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

为什么会这样？

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

设置 step(2) 使动画仅使用这些中间值中的 2 个。一个将是一个坚实的形象。但是另一个将拥有一个的 50% 和另一个的 50%。

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

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

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

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