没有抖动的效果,我试了很多次了。

来源:2-4 定义抖动的CSS动画

Rongdd

2015-07-04 12:57

@-webkit-keyframes rock{

    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)}

}

.c_zhongzi_box_rock{

        -webkit-animation:rock 2s infinite;

    } 

  <div class="c_zongzi_box c_zhongzi_box_rock">

没有效果,什么问题?

写回答 关注

4回答

  • 小王子抓猫咪
    2016-08-06 22:02:45

    在-webkit-内核浏览器下所有的transform需要加上-webkit-

    同时其他内核浏览器的特殊前缀也都要加上,如

    -ms-

    -o-

    -moz-

  • june18th
    2015-12-31 17:59:13

    下面代码中都添加上-webkit-(解决google兼容问题,在google测试试一下):-webkit-transform:rotate(0deg)

      {  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)}

    }


  • qq_桀桀桀_0
    2015-10-18 21:54:10

    可能是浏览器不兼容吧

  • qq_桀桀桀_0
    2015-10-18 21:48:35

    +1  我也没动画。。。

JS+CSS3实现“粽情端午”

用JS和CSS3技术实现3D效果粽子特效动画,掌握动画制作过程

39504 学习 · 74 问题

查看课程

相似问题