Animation

• @keyframes 定义 关键帧

  @keyframes mykf {
  	0% {top: 0; transition: top ease}
  	50% {top: 30px; transition: top ease-in}
  	75% {top: 10px; transition: top ease-out}
  	100% {top: 0; transition: top linear}
  }
  
  @keyframes mykf2 {
  	from {background: red;}
  	to {background: yellow;}
  }
  

• animation: 使用

  div {
  	animation: mykf 5s infinite;
  }
  

  • animation-name 时间曲线

  • animation-duration 动画的时长

  • animation-timing-function 动画的时间曲线

    • cubic-bezier

      以时间为横轴，以变换属性的百分比为纵轴的一条曲线。

      css 里面只允许 cubic-bezier，而且用的最多还是 ease， easy-in 进入屏幕用的多，easy-out 退出屏幕用的多。但是，推荐使用 ease。

  • animation-delay 动画开始前的延迟

  • animation-iteration-count 动画播放的次数

  • animation-diraction 动画的方向

• transition

  • transition-property 要变换的属性（好处是可以用来精细的控制每个属性的变换方式）
  • transition-duration 要变换的时长
  • transition-timing-function 时间曲线
  • transition-delay 延迟

Example

写一个骰子去

CSS 动画