[css]css中动画的使用

在网页上的动画效果可以由css实现或js实现，今天简单的讲一下css中动画如何实现。

动画

animation属性用来添加动画效果

实现步骤

• 在样式中定义动画

  @keyframes  动画名称{
      /*动画开始*/
      from{}
      /*动画结束*/
      to{}
  }

或是

@keyframes dance {
    0% {
     
    } 
  
    100% {
     
    }
  }

• 调用动画（在需要添加动画的元素样式中添加）

  animation：动画名称 动画花费时间 等；

动画属性

animation：动画名称，动画时长，速度曲线，延迟时间 ，重复次数，动画方向，执行完毕时状态

1. 动画名字参照css类选择器命名
2. 动画时长和延迟时间别忘了带单位 s
3. infinate 无限循环动画
4. alternate 为反向 就是左右来回执行动画（跑马灯）
5. forwards 动画结束停留在最后一帧状态
6. linear 让动画匀速执行
   

大家可以去试试