animation动画实现摇动效果

效果图如下

// 定义动画
 @keyframes shake {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            10% {
                -webkit-transform: rotate(1deg);
                transform: rotate(1deg);
            }

            20% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            30% {
                -webkit-transform: rotate(-2deg);
                transform: rotate(-2deg);
            }

            40% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            50% {
                -webkit-transform: rotate(2deg);
                transform: rotate(2deg);
            }

            60% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            70% {
                -webkit-transform: rotate(-2deg);
                transform: rotate(-2deg);
            }

            80% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            90% {
                -webkit-transform: rotate(1deg);
                transform: rotate(1deg);
            }

            100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
   // 使用
   .out-bg:hover .bg{
            animation: shake .5s linear 0s 1;
            color:#f60;
     }