首页 > Web开发 > 详细

CSS3摆动动画效果

时间:2019-12-24 16:43:33      阅读:207      评论:0      收藏:0      [点我收藏+]

效果图:红包在左右摇晃

技术分享图片 

代码如下:

@keyframes upAnimation {
    0 % {
        transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
    }
    10 % {
        transform: rotate(-12 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
    }
    20 % {
        transform: rotate(12 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
    }
    28 % {
        transform: rotate(-10 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
    }
    36 % {
        transform: rotate(10 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
    }
    42 % {
        transform: rotate(-8 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
    }
    48 % {
        transform: rotate(8 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
    }
    52 % {
        transform: rotate(-4 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
    }
    56 % {
        transform: rotate(4 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
    }
    60 % {
        transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.755, .5, .855, .06)
    }
    100 % {
        transform: rotate(0 deg);transition - timing - function: cubic - bezier(0.215, .61, .355, 1)
    }
}

 

CSS3摆动动画效果

原文:https://www.cnblogs.com/hool/p/12091464.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!