红包出来-晃动-回去-停顿-循环效果（JS和CSS两种）

纯JS版本：

<style>
        *{
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
            height: 500px;
            background: #ccc;
        }
        span {
            display: block;
            position: fixed;
            width: 100px;
            height: 150px;
            background: red;
            right: -50px;
            bottom: 200px;
            font-size: 24px;
            line-height: 150px;
            text-align: center;
            transform:rotate(0);
        }
</style>

<span>红包</span>

<script src="jquery-1.11.1.js"></script>
<script>
    /*
        a : 初始角度
        b : 到达晃动时，a为右晃动，b的初始为a的有晃动峰值
        c : c为b的左晃动的峰值
        d : 为更替循环到a时的变量
      sun ：晃动的次数
     lDis : 距离右侧的初始距离
     rDis ：与lDis的最大移动到的距离相同
     cont : 测试用，用来实验循环动画一次，所需要的时间，并非与外侧定时器时间，从而达到执行一周后出现停顿效果
    timer ：给予里的定时器的变量
     */

    var a=-30;
    var b=15;
    var c=-15;
    var d=0;
    var sun=0;
    var lDis=-50;
    var rDis=100;
    var cont=0
    var timer=null

setInterval(function () {
    timer=setInterval(function () {
        // cont++;
        // 一开始是-30deg，然后慢慢的变正
        if(a<0){
            $('span').css('transform','rotate('+a+'deg)');
            a++;
        }
        // 正了之后,给予lDis最大的移动距离，开始移动
        if(a==0&&lDis<100){
            $('span').css('right',lDis+'px');
            lDis+=2;
            if(lDis==100){
                rDis=100;
            }
        }
        // 移动到规定距离后，开始右晃到指定角度
        if(lDis==100&&a>=0&&a<15){
            a++;
            if(a==15){
                b=15;
            }
            $('span').css('transform','rotate('+a+'deg)');
        }
        // 右晃到指定角度后，开始左晃到指定角度
        if(lDis==100&&a==15&&b>-15){
            b--
            if(b==-15){
                c=-15
            }
            $('span').css('transform','rotate('+b+'deg)');
        }
        // 然后左晃到指定角度后，让他回正
        if(lDis==100&&b==-15&&c<0){
            c++
            if(c==0) {
                a = 0;
                sun++
                // 晃动循环3次
                if(sun>3){
                    sun=3;
                }
            }
            $('span').css('transform','rotate('+c+'deg)');
        }
        // 循环3次后，初始下各个值，然后向回移动
        if(sun==3&&rDis>-50){
            a=0;
            rDis-=2;
            b=15;
            c=-15;
            d=0;
            $('span').css('right',rDis+'px');
        }
        // 移动到一开始的位置后，使用d来执行到a原来的-30角度（如果这里直接用a会出现闪动）
        if(rDis==-50&&d>-30){
            d--;
            $('span').css('transform','rotate('+d+'deg)');
        // 把a、sun、和lDis变为初始值
            if(d==-30){
                lDis=-50;
                sun=0;
                a=-30
                // 停止计时器，即为执行了整整一次完整的动画循环
                clearInterval(timer)
                // console.log(cont);
            }
        }
    },10)
    // 根据cont的值，为外侧定时器给予秒数，从而达到停顿效果
},5000)
</script>

纯css版本

<style>
    * {
        padding: 0;
        margin: 0;
    }
    span {
        display: block;
        width: 150px;
        height: 200px;
        border-radius: 16px;
        background-color: red;
        line-height: 200px;
        font-size: 24px;
        text-align: center;
        position: fixed;
        right: -75px;
        bottom: 100px;
        transform: rotate(-30deg);
        animation: bagAnimation 3s  linear infinite ;
    }
    @keyframes bagAnimation {
        0% {
            transform: rotate(-30deg);
        }
        /* 0-30一样是为了模拟每次的延迟生效时间 */
        30% {
            transform: rotate(-30deg); 
        }
        40% {
            transform: rotate(0deg);
        }
        50% {
            transform: translateX(-200px);
        }
        55% {
            transform: translateX(-200px) rotate(-15deg);
        }
        60% {
            transform: translateX(-200px) rotate(15deg);
        }
        65% {
            transform:  translateX(-200px) rotate(-15deg);
        }
        70% {
            transform: translateX(-200px) rotate(15deg);
        }
        75% {
            transform: translateX(-200px) rotate(0deg);
        }
        85% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(0) rotate(-30deg);
        }

    }
</style>

<body>
    <span>红包</span>
</body>