使用css3动画更改背景图像时为什么会有褪色效果？

里奥·海尔文

当我使用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%;
            }
        }`

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

错误的

为什么会这样呢？

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

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

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

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