CSS3摆动动画效果

最新推荐文章于 2025-02-27 08:06:41 发布

原创最新推荐文章于 2025-02-27 08:06:41 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #前端 #css #html #javascript

效果图：红包在左右摇晃

代码如下：

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