九、动画

https://www.cnblogs.com/qianduanjingying/p/4937574.html

1、CSS3

• transition: 由事件触发
  transition-property: width(所有css熟悉都可以)
  transition-duration：持续时间
  transition-timing-function：linear、ease、ease-in、cubic-bezier(n,n,n,n)
  transition-delay：等待多久开始

div
{
    width:100px;
    transition: width 2s;
}

• transform：
  rotate ：角度
  scale ：规模
  skew ：形变
  translate ：平移
  matrix：矩阵

• animation
  animation:
  name : 动画名称
  duration : 动画执行时间
  timing-function ：速度曲线
  delay ：延迟
  iteration-count ：播放次数
  direction：是否反向播放

@keyframes  move{
  form{ left:0px;}   to{ left:200px;}
}
div{animation:move 5s infinite;}