问答详情
源自:9-8 CSS3中设置动画的播放状态

我这个 鼠标滑过没变化呢 ...

...

提问者:_亓 2014-12-05 13:30

个回答

  • purple_yao
    2014-12-05 16:56:04
    已采纳

    你的49行代码webkit前少了一个字符“-”,

    “webkit-animation-play-state:running;”

    应该写成:

    “-webkit-animation-play-state:running;”

  • _亓
    2014-12-05 16:29:53

    @-webkit-keyframes move {
      0%{
        transform: translateY(90px);
      }
      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);
      }
    }
    
    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);
      -webkit-animation-name: move;
      -webkit-animation-duration: 10s;
      -webkit-animation-timing-function: ease-in;
      -webkit-animation-delay: .2s;
      -webkit-animation-iteration-count:infinite;
      -webkit-animation-direction:alternate;
      -webkit-animation-play-state:paused;
    }
    div:hover span {
      webkit-animation-play-state:running;
    }


  • 偌颜宁
    2014-12-05 13:54:08

    代码贴出来看看?