动画（animation）、过渡（transition）及渐变小结

动画

基本使用步骤

1.定义动画

@keyframes 动画名称 { form{} 初始状态，如果和盒子状态相同可省略 0%{} to{} 结束状态 100%{} }

2.调用动画

animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 速度曲线：linear 匀速 补间动画 速度曲线：steps(数值) 逐帧动画 重复次数：infinite 无限播放 动画方向：alternate 交替播放 执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效 animation-name:动画名称，必须 animation-duration:动画时长，必须 animation-timing-function:速率曲线： linear匀速 animation-interation-count:动画次数，infinite

  .box {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* 动画的使用 */
        animation: move 3s alternate linear infinite 1s;
        /* 动画名称 */
        /* animation-name: move; */
        /* 动画时长 */
        /* animation-duration: 4s; */
        /* 动画延迟 */
        /* animation-delay: 3s; */
        /* 设置结束时的状态：还原 | 保留结束状态 
        forwards：最后一帧状态:就是保留结束时的状态
        backwards:在有延迟的时候，在动画没有开始之前就会进入到第一帧状态
        both:两个效果都有*/
        /* animation-fill-mode: both; */
        /* 添加速率曲线，设置动画过程中动画的速度分布
        linear:匀速 */
        /* animation-timing-function: linear; */
        /* animation-timing-function: steps(3); */
        /* 设置动画的执行次数
        infinite:无限次 */
        /* animation-iteration-count: infinite; */
        /* 设置动画的方向
        细节：对次数有要求，一般配置infinite使用 */
        /* animation-direction: alternate; */
​
        /* 动画的执行状态
        running:执行动画
        paused:暂停 */
      }
      .box:hover {
        animation-play-state: paused;
      }
​
      @keyframes move {
        /* 起始状态 */
        from {
          transform: translateX(0px);
          background-color: yellow;
        }
        /* 结束状态 */
        to {
          transform: translateX(600px);
          background-color: red;
        }
      }

过渡

代码：

transition: all 2s;

过渡的局限：

一次操作只能执行一次

不能保持结束状态

不能设置执行的次数

渐变

background-image:linear-gredient([方向]，颜色1，颜色2，颜色3...)

取值：

1.方位名词（to left,to top,to right,to bottom),颜色

 background-image: linear-gradient(to top, red, blue, yellow)

2.角度（deg)，颜色

background-image: linear-gradient(90deg, red, blue, yellow)

补充：

径向渐变

background-image: radial-gradient(red, blue)

\