问答详情
源自：9-3 CSS3中设置动画播放时间

为什么我关键帧动画animation这几章提交之后全没有经验啊！我动画都做来了，而且加了浏览器兼容

@keyframes changeColor {

  from {

    background: red;

  }

  to {

    background:green;

  }

}

div {

  width: 200px;

  height: 200px;

  background: red;

  text-align:center;

  margin: 20px auto;

  line-height: 200px;

  color: #fff;

}

div:hover {

  animation-name: changeColor;

  animation-duration:5s;

  -webkit-animation-duration:5s;

  animation-timing-function: ease-out;

  animation-delay: 0.1s;

}


提问者：Longingforthesun 2016-07-06 10:49

个回答

  • weibo_哆啦A梦有大口袋_0
    2016-07-12 11:20:38

    出于对回答者的认同和尊重，解决了你的问题，请采纳，谢谢

    0
  • weibo_哆啦A梦有大口袋_0
    2016-07-12 11:20:05

    因为css文件不能以@开头，所以你在代码前面加一行注释就好了

    /*不能以@开头*/
@keyframes changeColor {
  from {
    background: red;
  }
  to {
    background:green;
  }
}
div {
  width: 200px;
  height: 200px;
  background: red;
  text-align:center;
  margin: 20px auto;
  line-height: 200px;
  color: #fff;
}
div:hover {
  animation-name: changeColor;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-delay: .1s;
}


    2
  • ♚ prime
    2016-07-07 10:26:22

    删除掉@keyframes前面的@再提交就可以了

    0