A、CPU全称Central Processing Unit 中文意思是中央处理器，其功能主要是解释计算机指令以及处理计算机软件中的数据
B、APU全称是Accelerated Processing Units，加速处理器，其功能主要是大幅提升电脑运行效率
C、CGI全称是Common Gateway Interface，是http服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上，其功能主要是绝大多数的CGI程序被用来解释处理来自表单的输入信息，并在服务器产生相应的处理，或将相应的信息反馈给浏览器
D、GPU即图形处理器，专门处理和绘制图形相关的硬件，GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务
will-change提升浏览器性能，兼容性不是很好。值：
auto scroll-position contents <cutom-ident> 这四个用的比较多。性能最好，用的最多的是 <custom-ident> 明确指定要改变的属性和给定的名称。如： -webkit-will-change: transform; /*一定要在动画之前声明，比如在.container里面声明，然后在悬停： .container:hover{...} 这样才会提高性能。*/ -moz-will-change: transform; -ms-will-change: transform; -o-will-change: transform;此外，还有把 will-change 移除掉，否则会增加内存，一般使用js来操作，暂时没接触！！
============================
-------------
animation的语法：
animation：<single-animation>[,<single-animation>]*animation:属性名 过渡时间 过渡曲线 延迟时间 循环次数 循环方向 停止状态 开始还是结束 <single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> 说明： 复合属性。检索或设置对象所应用的动画特效。 如果提供多组属性值，以逗号进行分隔。 注意：如果只提供一个<time>参数，则为 <' animation-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' animation-duration '> 的值定义，第二个为 <' animation-delay '> 的值定义 对应的脚本特性为animation。 取值： <' animation-name '>： 检索或设置对象所应用的 动画名称 说明： 检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationName。 <' animation-duration '>： 检索或设置对象动画的 持续时间 说明： 检索或设置对象动画的持续时间 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationDuration。 <' animation-timing-function '>： 检索或设置对象动画的 过渡类型，值如下： 九个值： linear：匀速。 ease：逐渐变慢。 ease-in：加速。 ease-out：减速 ease-in-out：先加速，后减速 step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) steps(<integer>[, [ start | end ] ]?)： 接受两个参数的步进函数。第一个参数必须为正整数， 指定函数的步数。第二个参数取值可以是start或end， 指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。 cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 说明： 检索或设置对象动画的过渡类型 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationTimingFunction。 <' animation-delay '>： 检索或设置对象动画 延迟的时间 说明： 检索或设置对象动画的延迟时间 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationDelay。 <' animation-iteration-count '>： 检索或设置对象动画的 循环次数 infinite：无限循环 <number>：指定对象动画的具体循环次数 (iteration [ɪtə'reɪʃ(ə)n] 重复 ) 说明： 检索或设置对象动画的循环次数 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationIterationCount。 <' animation-direction '>： 检索或设置对象动画在循环中 是否反向运动 取值： normal：正常方向 reverse：反方向运行 alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交替运行 alternate ['ɔːltəneɪt; 'ɒl-] 交替；轮流 reverse [rɪ'vɜːs] 颠倒；倒转 <' animation-fill-mode '>： 检索或设置对象动画时间之外的状态 取值： none：默认值。不设置对象动画之外的状态 forwards：设置对象状态为动画结束时的状态 backwards：设置对象状态为动画开始时的状态 both：设置对象状态为动画结束或开始的状态 说明： 检索或设置对象动画时间之外的状态 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationFillMode。 <' animation-play-state '>： 检索或设置对象动画的状态。w3c正考虑是否将该属性移除， 因为动画的状态可以通过其它的方式实现，比如重设样式 取值： running：运动 paused：暂停 检索或设置对象动画的状态 如果提供多个属性值，以逗号进行分隔。 对应的脚本特性为animationPlayState。========================
记得加前缀：
-webkit-
-moz- -ms- -o-animation-name属性检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义如果提供多个属性值，以逗号进行分隔。
A、keyframename是animation-name属性的参数值，指定要绑定到选择器的关键帧的名称
B、infinite是animation-iteration-count属性的参数，表示无限循环C、none是animation-name属性的默认值，当值为none时，将没有任何动画效果D、forwards是animation-fill-mode属性的参数，表示设置对象状态为动画结束时的状态
A、 infinite是animation-iteration-count属性的参数，表示无限循环
B、forwards是animation-fill-mode属性的参数，表示设置对象状态为动画结束时的状态
C、animation-duration是用来指定元素播放动画所持续的时间长，取值<time>为数值，单位为s （秒）或者毫秒(ms)其，默认值为0
D、none是animation-name属性的默认值，当值为none时，将没有任何动画效果
animation-delay 属性定义动画什么时候开始，单位可以是秒（s）或毫秒（ms），允许负值，-2s使动画马上开始，但会跳过2s进入动画。
-webkit-animation-delay: -1s; 等待1秒，然后开始动画
-moz-animation-delay: -1s; -ms-animation-delay: -1s; -o-animation-delay: -1s; animation-delay: -1s;动画完成一个周期耗时为animation-duration的值，与animation-delay的值无关
-webkit-animation-iteration-count: infinite; 无限循环，跟 animation-delay:2s; 是没有关系的。在计算动画周期时，千万别加2s。
-webkit-animation-iteration-count: 2;
-moz-animation-iteration-count: 2; -ms-animation-iteration-count: 2; -o-animation-iteration-count: 2; animation-iteration-count: 2;-webkit-animation-iteration-count: infinite; 无限循环，跟 animation-delay:2s; 是没有关系的。在计算动画周期时，千万别加2s。
-moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite;
@keyframes love{
from{...}
5%{...} /*动画从0%到5%，用了三分之一的时间，动画比较慢*/
90%{...} /*动画从5%到90%，用了三分之一的时间，动画很快*/
to{...} /*动画从90%到100%，用了三分之一的时间，动画较快*/
}
animationname：必写项，定义animation的名称
keyframes-selector：必写项，动画持续时间的百分比，0-100%、from (0%)、to (100%)
css-styles：必写项，一个或多个合法的CSS样式属性