CSS动画

CSS动画

• 位置 - 平移
• 方向 - 旋转
• 大小 - 缩放
• 透明度
• 其他 - 线形变换

前端动画怎么做

• animation过渡动画
• transition过渡动画
• JS原生控制DOM位置
• canvas绘制动画

transition 过渡动画

用来控制过渡的时间，使用过渡的属性，过渡效果曲线，过渡的延时

要求元素的状态必须有变化，即某CSS值变化时发生的动画

• transition-property
  • 规定设置过渡效果的 CSS 属性的名称。
• transition-duration
  • 规定完成过渡效果需要多少秒或毫秒。
• transition-timing-function
  • 规定速度效果的速度曲线。
• transition-delay
  • 定义过渡效果何时开始

在chrome的调试窗口按下esc在下面出现一个框框，选择 animation就可以看到动画面板了

div
{
   
  width:100px;</