动画持续时间设置不起作用

Question

我正在制作过渡效果，由于某种原因，我为动画设置的持续时间不起作用。我将动画设置为播放8秒，现在似乎它只播放了一半的时间。

有谁看到我做错了什么？也有人知道我怎么能这么慢，从这两个图像过渡。我希望过渡很快发生。

#section1-right-container {
	float: right;
	width: 48%;
    background: blue;
}
#think {
	width: 500px;
	height: auto;
	animation-name: think;
	animation-duration: 8s;
	/*animation-iteration-count: 1;*/
    animation-direction: normal;
	animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes think {
    0%, 51%   {background-image: url("http://optimumwebdesigns.com/images/think.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 500px; width: 500px;}
    51%, 100% {background-image: url("http://optimumwebdesigns.com/images/think2.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 500px; width: 500px;}
}

/* Standard syntax */
@keyframes think {
    0%   {background-image: url("http://optimumwebdesigns.com/images/think.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 500px; width: 500px;}
    51%, 100% {background-image: url("http://optimumwebdesigns.com/images/think2.png"); background-repeat: no-repeat;
background-size: 100% auto; height: 500px; width: 500px;}
}

<div id="section1-right-container">
			<div id="think"></div>
</div>