个回答

• qq_嶸歸_0

  2018-08-21 10:29:12

  你的问题可以这样解决，

  如果暂停了动画的播放，元素的样式将回到最原始设置状态

  @keyframes move {

    0%{

      transform: translateY(90px);

      background: orange;

    }

    15%{

      transform: translate(90px,90px);

    }

    30%{

      transform: translate(180px,90px);

    }

    45%{

      transform: translate(90px,90px);

    }

    60%{

      transform: translate(90px,0);

    }

    75%{

      transform: translate(90px,90px);

    }

    90%{

      transform: translate(90px,180px);

    }

    100%{

      transform: translate(90px,90px);

      background: green;

    }

  }

  
  

  div {

    width: 200px;

    height: 200px;

    border: 1px solid red;

    margin: 20px auto;

  }

  span{

    display: inline-block;

    width: 20px;

    height: 20px;

    background: orange;

    transform: translateY(90px);

    animation-name: move;

    animation-play-state:paused;

  }

  div:hover span {

    animation-name: move;

    animation-duration: 10s;

    animation-timing-function: ease-in;

    animation-delay: .2s;

    animation-iteration-count:infinite;

    animation-direction:alternate;

   animation-play-state:running;

  }

  
  

  1

• 封笺

  2018-06-14 21:07:03

  往后面看会有的，默认的就是none

  CSS3中设置动画时间外属性

  animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：

  属性值	效果
  none	默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
  forwards	表示动画在结束后继续应用最后的关键帧的位置
  backwards	会在向元素应用动画样式时迅速应用动画的初始帧
  both	元素动画同时具有forwards和backwards效果

  在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。

  例如：让动画停在最一帧处。代码如下：

   animation-fill-mode:forwards;

  
  

  1