css3实现元素抖动效果

代码不多，不截图了，可自行尝试

css部分比较冗余，是因为考虑到了适配情况。可酌情删减

-webkit-animation-name: shaky-slow; // webkit内核-ms-animation-name: shaky-slow;     // ie内核animation-name: shaky-slow;     // 原生animation-duration: 4s;         // 动画执行时间animation-delay: 0s;            // 动画等待时间animation-iteration-count: infinite;    // 动画执行次数，infinite为一直执行animation-timing-function: ease-in-out; // 动画执行速度animation-delay: 0s;            // 动画延时时间animation-play-state: running;      // 动画执行状态，一般没必要parse

文字文字文字

    .shaky {        display: inline-block;        padding: 1px;        font-size: 12px;        -webkit-transform-origin: center center;        -ms-transform-origin: center center;        transform-origin: center center;        -webkit-animation-name: shaky-slow;        -ms-animation-name: shaky-slow;        animation-name: shaky-slow;        -webkit-animation-duration: 4s;        -ms-animation-duration: 4s;        animation-duration: 4s;        -webkit-animation-iteration-count: infinite;        -ms-animation-iteration-count: infinite;        animation-iteration-count: infinite;        -webkit-animation-timing-function: ease-in-out;        -ms-animation-timing-function: ease-in-out;        animation-timing-function: ease-in-out;        -webkit-animation-delay: 0s;        -ms-animation-delay: 0s;        animation-delay: 0s;        -webkit-animation-play-state: running;        -ms-animation-play-state: running;        animation-play-state: running;
    }
    @-webkit-keyframes shaky-slow {
        0% {            -webkit-transform: translate(0px, 0px) rotate(0deg);
        }
        2% {            -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {            -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {            -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {            -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {            -webkit-transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {            -webkit-transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {            -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {            -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {            -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {            -webkit-transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {            -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {            -webkit-transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {            -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {            -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);
        }
        30% {            -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {            -webkit-transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {            -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {            -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {            -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {            -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {            -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {            -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {            -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {            -webkit-transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {            -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {            -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {            -webkit-transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {            -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {            -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {            -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {            -webkit-transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {            -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {            -webkit-transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {            -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {            -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {            -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {            -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {            -webkit-transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {            -webkit-transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {            -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {            -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {            -webkit-transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {            -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {            -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        94% {            -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {            -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {            -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);
        }
    }
    @keyframes shaky-slow {
        0% {            transform: translate(0px, 0px) rotate(0deg);
        }
        2% {            transform: translate(-1px, 1.5px) rotate(1.5deg);
        }
        4% {            transform: translate(1.3px, 0px) rotate(-0.5deg);
        }
        6% {            transform: translate(1.4px, 1.4px) rotate(-2deg);
        }
        8% {            transform: translate(-1.3px, -1px) rotate(-1.5deg);
        }
        10% {            transform: translate(1.4px, 0px) rotate(-2deg);
        }
        12% {            transform: translate(-1.3px, -1px) rotate(-2deg);
        }
        14% {            transform: translate(1.5px, 1.3px) rotate(1.5deg);
        }
        16% {            transform: translate(1.5px, -1.5px) rotate(-1.5deg);
        }
        18% {            transform: translate(1.3px, -1.3px) rotate(-2deg);
        }
        20% {            transform: translate(1px, 1px) rotate(-0.5deg);
        }
        22% {            transform: translate(1.3px, 1.5px) rotate(-2deg);
        }
        24% {            transform: translate(-1.4px, -1px) rotate(2deg);
        }
        26% {            transform: translate(1.3px, -1.3px) rotate(0.5deg);
        }
        28% {            transform: translate(1.6px, -1.6px) rotate(-1.5deg);
        }
        30% {            transform: translate(-1.3px, -1.3px) rotate(-1.5deg);
        }
        32% {            transform: translate(-1px, 0px) rotate(2deg);
        }
        34% {            transform: translate(1.3px, 1.3px) rotate(-0.5deg);
        }
        36% {            transform: translate(1.3px, 1.6px) rotate(1.5deg);
        }
        38% {            transform: translate(1.3px, -1.6px) rotate(1.5deg);
        }
        40% {            transform: translate(-1.4px, -1px) rotate(-0.5deg);
        }
        42% {            transform: translate(-1.4px, 1.3px) rotate(-0.5deg);
        }
        44% {            transform: translate(-1.6px, 1.4px) rotate(0.5deg);
        }
        46% {            transform: translate(-2.1px, -1.3px) rotate(-0.5deg);
        }
        48% {            transform: translate(1px, 1.6px) rotate(1.5deg);
        }
        50% {            transform: translate(1.6px, 1.6px) rotate(1.5deg);
        }
        52% {            transform: translate(-1.4px, 1.6px) rotate(0.5deg);
        }
        54% {            transform: translate(1.6px, -1px) rotate(-2deg);
        }
        56% {            transform: translate(1.3px, -1.6px) rotate(-2deg);
        }
        58% {            transform: translate(-1.3px, -1.6px) rotate(0.5deg);
        }
        60% {            transform: translate(1.3px, 1.6px) rotate(-0.5deg);
        }
        62% {            transform: translate(0px, 0px) rotate(-1.5deg);
        }
        64% {            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        66% {            transform: translate(1.6px, -1.6px) rotate(0.5deg);
        }
        68% {            transform: translate(0px, -1.6px) rotate(-2deg);
        }
        70% {            transform: translate(-1.6px, 1px) rotate(1.5deg);
        }
        72% {            transform: translate(-1.6px, 1.6px) rotate(2deg);
        }
        74% {            transform: translate(1.3px, -1.6px) rotate(-0.5deg);
        }
        76% {            transform: translate(1.4px, 1px) rotate(-0.5deg);
        }
        78% {            transform: translate(-1px, 1.4px) rotate(2deg);
        }
        80% {            transform: translate(1.4px, 1.6px) rotate(2deg);
        }
        82% {            transform: translate(-1.6px, -1.6px) rotate(-0.5deg);
        }
        84% {            transform: translate(-1.4px, 1.4px) rotate(-2deg);
        }
        86% {            transform: translate(1px, 1.4px) rotate(-2deg);
        }
        88% {            transform: translate(-1.4px, 1.4px) rotate(-1.5deg);
        }
        90% {            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        92% {            transform: translate(-1.4px, 1.6px) rotate(2deg);
        }
        94% {            transform: translate(-1.6px, -1.6px) rotate(-2deg);
        }
        96% {            transform: translate(-1.4px, 1.3px) rotate(-2deg);
        }
        98% {            transform: translate(1.3px, 1px) rotate(-0.5deg);
        }
    }

作者：世外大帝
链接：https://www.jianshu.com/p/720c9d18a73e