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

...

_亓

2014-12-05

源自：十天精通CSS3 9-8

关注问题我要回答

1154

操作

收起

5 回答

purple_yao
2014-12-05

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

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

应该写成：

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

0 回复有任何疑惑可以回复我~

收起回答

_亓提问者

非常感谢！

2014-12-05 回复有任何疑惑可以回复我~

_亓提问者
2014-12-05

@-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;
}

0 回复有任何疑惑可以回复我~

收起回答