css3动画

[incuisting]

要实现css3的动画主要有两个关键的点

1. 定义关键帧@Keyframes
2. 在用animation 调用定义的keyframes

如何定义一个@Keyframes？
例子:

@keyframes identifier {
  0% { top: 0; left: 0px}
  50% { top: 30px; left: 20px; }
  100% { top: 0; left: 30px;}
}

@Keyframes 后面跟着的是这个关键帧的名字，下面是在执行时间在执行到相应的百分比时应该达到的效果。比如动画定义了10秒，0秒的时候 top: 0; left: 0px，0-5秒期间 由top: 0; left: 0px变到top: 30px; left: 20px; ,具体用什么样的缓动，可以在animation里面定义。

参考资料MDN

如何给一个元素加上动画？
例子：

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  0%{
    margin-left: 100%;
    width: 300%; 
  }

  100% {
    margin-left: 0%;
    width: 100%;
  }
}

改需要加动画的元素的css上面加上，animation属性，必要的是 animation-name 和 animation-duration

其他animation的配置 MDN上面有比较详细的解释