/* 中心固定,小角度来回转动 */
@keyframes small-rotate {
    0% {
        -webkit-transform: rotate(-4deg);
        -moz-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    10% {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    20% {
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    30% {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    40% {
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    50% {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    60% {
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    70% {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    80% {
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    90% {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        -ms-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    100% {
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        -ms-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
}

/* 缩小 */
@keyframes reduce {
    from{
        -webkit-transform: scale(1.8);
        -moz-transform: scale(1.8);
        -ms-transform: scale(1.8);
        -o-transform: scale(1.8);
        transform: scale(1.8);
    }
    to{
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

/* 顶部固定,下部小角度摇摆 */
@-webkit-keyframes swinging {
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(3deg); }
    10% { -webkit-transform: rotate(-3deg); }
    15% { -webkit-transform: rotate(3deg); }
    20% { -webkit-transform: rotate(-3deg); }
    25% { -webkit-transform: rotate(2deg); }
    30% { -webkit-transform: rotate(-2deg); }
    35% { -webkit-transform: rotate(2deg); }
    40% { -webkit-transform: rotate(-2deg); }
    45% { -webkit-transform: rotate(1deg); }
    50% { -webkit-transform: rotate(0deg); } /* Come to rest at 50%. The rest is just stillness */
    100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes swinging {
    0% { -moz-transform: rotate(0deg); }
    5% { -moz-transform: rotate(3deg); }
    10% { -moz-transform: rotate(-3deg); }
    15% { -moz-transform: rotate(3deg); }
    20% { -moz-transform: rotate(-3deg); }
    25% { -moz-transform: rotate(2deg); }
    30% { -moz-transform: rotate(-2deg); }
    35% { -moz-transform: rotate(2deg); }
    40% { -moz-transform: rotate(-2deg); }
    45% { -moz-transform: rotate(1deg); }
    50% { -moz-transform: rotate(0deg); } /* Come to rest at 50%. The rest is just stillness */
    100% { -moz-transform: rotate(0deg); }
}
@keyframes swinging {
    0% { transform: rotate(0deg); }
    5% { transform: rotate(3deg); }
    10% { transform: rotate(-3deg); }
    15% { transform: rotate(3deg); }
    20% { transform: rotate(-3deg); }
    25% { transform: rotate(2deg); }
    30% { transform: rotate(-2deg); }
    35% { transform: rotate(2deg); }
    40% { transform: rotate(-2deg); }
    45% { transform: rotate(1deg); }
    50% { transform: rotate(0deg); } /* Come to rest at 50%. The rest is just stillness */
    100% { transform: rotate(0deg); }
}