css3动画属性

animation动画
@keyframes规则

  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}

keyframes被称为关键帧，其类似于flash中的关键帧。在css3中其主要以“@keyframes"开头，后满紧跟着是动画名称加上一对花括号{...}，括号中就是一些不同时间段样式规则

在一个"@keyframes"中的样式规则可以有多个百分比构成的，如在”0%"到"100%"之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。

经验与技巧：在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词from和to来代表，其中0%对应的是from，100%对应的是to

移动端：
移动端页面布局大概有两种方案：

使用rem作为尺寸单位，通过js来根据屏幕宽度来控制rem的大小，从而达到适配的目的；
使用vm，即视口viewport，来作为尺寸大小。