css3关键帧

Keyframes定义
关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
使用说明
使用@Keyframes规则创建动画，通过逐渐改变从一个css样式设定到另一个。
在动画过程中可以通过@Keyframes规则多次更改css样式的设定。
语法

@Keyframes animationname{ //必写项，定义animation的名称。
	keyframes-selector{ //必写项，动画持续时间的百分比，0-100%，from(0%),to(100%)
		css-styles; //必写项，一个或多个合法的css样式属性
	}
}

补充知识：
will-change 属性
目的：增加页面渲染性能。
用途：提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
语法

will-change: auto | scroll-position | contents | <custom-ident> | <animateable-feature>;

关键字说明：
auto :此关键字表示没有特定的意图,适用于它通常所做的任何启发式和优化。
scroll-position :表示将要改变元素的滚动位置。
contents :表示将要改变元素的内容。
custom-ident : 明确指定将要改变的属性与给定的名称。–推荐。
animateable-feature :可动画的-些特征值,比如left. top, margin等。