2回答

小于飞飞

2017-01-13

注意：forwards值，表示在动画结束时，停在最后一个关键帧，而不会回到动画的第一帧。如没这个设置，会回到动画初始状态。backwards值，在有延迟动画开始时，在延迟的时间内状态，是动画的第一帧状态。

测试如下代码：

css样式：
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;	
	animation:mymove 3s;
	animation-delay:5s;
	animation-fill-mode:backward;/*forwards*/

	/* Safari 和 Chrome */
	-webkit-animation:mymove 3s;
	-webdit-animation-delay:5s;
	-webkit-animation-fill-mode:backwards;
}

@keyframes mymove
{
	from {transform:rotate(7deg);}
	to {transform:rotate(150deg);}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
	from {transform:rotate(7deg);}
	to {transform:rotate(150deg);}
}

HTML代码：

<div></div>
<p><strong>注意：</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p>

测试：1. 先将animation-fill-mode:backward; 属性去掉，观察动画开始前和结束状态。

          2. 添加上animation-fill-mode:backward;属性，在观察动画开始前和结束状态。

          3. 将animation-fill-mode:backward;改为animation-fill-mode:forwards;，在观察动画开始前和结束状态。

就清楚属性值得意思，希望对你有帮助，祝学习愉快，欢迎采纳。

3

qq_落雪残痕灬_04317614

提问者

2017-01-14

基本上明白了，谢谢

0