CSS3摆动动画效果

效果图：红包在左右摇晃

 

代码如下：

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