移动web -02

一 .动画实现步骤

1. 设置box 宽高, 调用动画 animation:move+时间

2. :让宽度从多少到多少 @keyframes change

动画注意点:

1.一次动画完成后,默认会突然会到初始状态.
2.多个动画之间动画的名称不能重复.
3.动画的名称不能为running,否则动画不生效.

二. 定义动画 1.animation；必须属性(动画名称+时长) ,速度曲线,延迟时间,重复次数,动画方向,执行完毕时状态 匀速曲线:linear均速播放 { 一般用于补间动画 延迟时间:s/ms 无限播放:infinite 速度曲线：默认 ease 动画执行方向: alternate为反向 steps(次数)一般配合精灵图使用 执行完毕时的状态：forwards 动画会停在动画结束时的状态

  2.用精灵图定位时,语法是:
   @keyframes move {
        to {
             background-position: -8580px 0;
        }
    }
    
     .box:hover {
           animation: move 2s steps(26) ;
    }
    

  3.暂停动画一般配合hover使用

   /* 1.定义动画 */
  @keyframes change {
      to {
        width: 300px;
        height: 500px;
        background-color: rgba(255, 0, 0, 0.572);
        border-radius: 50%;
          }
      }
      
    谁在调用动画，就给谁设置:hover 去暂停动画
      .box:hover {
          animation-play-state: paused;
      }