问答详情
源自：2-4 定义抖动的CSS动画

keyframes + animation没有效果

@-webkit-keyframes change{

  0%{ transform:rotate(0deg);}

  10%{ transform:rotate(3deg);}

  20%{ transform:rotate(-3deg);}

  30%{ transform:rotate(2deg);}

  40%{ transform:rotate(-2deg);}

  50%{ transform:rotate(1deg);}

  60%{ transform:rotate(-1deg);}

  70%{ transform:rotate(0deg);}

  100%{ transform:rotate(0deg);}

}

.text{width:400px;height:400px;background:url('./img/zz.png') no-repeat;position:absolute;top:200px;left:500px;}

.change{-webkit-animation: change 2s infinite;}

这段代码怎么没有效果？（用的360浏览器，webkit内核）？


提问者：黄昏丶如果选择 2015-06-27 11:31

个回答

  • Rongdd
    2015-07-04 13:50:59
    已采纳

    把代码改为

    @-webkit-keyframes rotateplane {

        0%{ -webkit-transform:rotate(0deg) } 

        10%{-webkit-transform:rotate(3deg)}

        20%{-webkit-transform:rotate(-3deg)}

        30%{-webkit-transform:rotate(2deg)}

        40%{-webkit-transform:rotate(-2deg)}

        50%{-webkit-transform:rotate(1deg)}

        60%{-webkit-transform:rotate(-1deg)}

        70%{-webkit-transform:rotate(0deg)}

        100%{-webkit-transform:rotate(0deg)}

    }


    0
  • 琦琦小
    2015-07-22 22:24:06

    我试了下，谷歌浏览器就可以晃动，但是火狐浏览器没这个晃动

    0
  • Kodo
    2015-06-28 10:25:10

    目测代码没问题

    0