css3 抖动

1. html

<div id="wrapper">

<section>

<p class="shake freez shake-hard">shake-hard</p>

</section>

<img class="shake shake-hard" src="img/1.png" alt="musica_byern" width="600">

</div>

2. css

#wrapper {
            margin: 0 auto;
            width: 90%;
            text-align: center;
        }

        #wrapper p {
            font-family: helvetica;
            font-weight: bold;
            font-size: 80px;
            color: red;
        }

        /* fn */
        .shake {
            display: inline-block;
            -webkit-transform-origin: center center;
            -ms-transform-origin: center center;
            transform-origin: center center
        }

        .shake:hover {
            -webkit-animation-name: shake-base;
            -ms-animation-name: shake-base;
            animation-name: shake-base;
            -webkit-animation-duration: 100ms;
            -ms-animation-duration: 100ms;
            animation-duration: 100ms;
            -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
        }

        .shake.freez {
            -webkit-animation-play-state: paused !important;
            -ms-animation-play-state: paused !important;
            animation-play-state: paused !important
        }

        .shake.freez.shake-hard {
            -webkit-animation-name: shake-hard;
            -ms-animation-name: shake-hard;
            animation-name: shake-hard;
            -webkit-animation-duration: 100ms;
            -ms-animation-duration: 100ms;
            animation-duration: 100ms;
            -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 shake-hard {
            0% {
                -webkit-transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                -webkit-transform: translate(5px, -4px) rotate(-2.5deg)
            }

            4% {
                -webkit-transform: translate(-10px, 5px) rotate(2.5deg)
            }

            6% {
                -webkit-transform: translate(0px, 5px) rotate(-3.5deg)
            }

            8% {
                -webkit-transform: translate(-6px, -10px) rotate(-1.5deg)
            }

            10% {
                -webkit-transform: translate(2px, -7px) rotate(1.5deg)
            }

            12% {
                -webkit-transform: translate(0px, 1px) rotate(0.5deg)
            }

            14% {
                -webkit-transform: translate(7px, -9px) rotate(-0.5deg)
            }

            16% {
                -webkit-transform: translate(-8px, 4px) rotate(-2.5deg)
            }

            18% {
                -webkit-transform: translate(-9px, -4px) rotate(-0.5deg)
            }

            20% {
                -webkit-transform: translate(-8px, -8px) rotate(0.5deg)
            }

            22% {
                -webkit-transform: translate(-7px, 0px) rotate(-0.5deg)
            }

            24% {
                -webkit-transform: translate(-10px, -5px) rotate(-3.5deg)
            }

            26% {
                -webkit-transform: translate(1px, -10px) rotate(-0.5deg)
            }

            28% {
                -webkit-transform: translate(5px, 2px) rotate(-1.5deg)
            }

            30% {
                -webkit-transform: translate(-8px, 5px) rotate(-0.5deg)
            }

            32% {
                -webkit-transform: translate(-4px, 2px) rotate(1.5deg)
            }

            34% {
                -webkit-transform: translate(-9px, 8px) rotate(1.5deg)
            }

            36% {
                -webkit-transform: translate(8px, -3px) rotate(1.5deg)
            }

            38% {
                -webkit-transform: translate(-10px, 7px) rotate(-0.5deg)
            }

            40% {
                -webkit-transform: translate(-7px, 1px) rotate(-3.5deg)
            }

            42% {
                -webkit-transform: translate(-9px, 7px) rotate(0.5deg)
            }

            44% {
                -webkit-transform: translate(4px, 2px) rotate(-3.5deg)
            }

            46% {
                -webkit-transform: translate(8px, 4px) rotate(2.5deg)
            }

            48% {
                -webkit-transform: translate(-5px, -1px) rotate(-2.5deg)
            }

            50% {
                -webkit-transform: translate(-7px, 5px) rotate(-2.5deg)
            }

            52% {
                -webkit-transform: translate(-1px, -7px) rotate(-3.5deg)
            }

            54% {
                -webkit-transform: translate(-2px, -3px) rotate(0.5deg)
            }

            56% {
                -webkit-transform: translate(-4px, -6px) rotate(-2.5deg)
            }

            58% {
                -webkit-transform: translate(5px, 4px) rotate(-2.5deg)
            }

            60% {
                -webkit-transform: translate(-3px, 2px) rotate(-0.5deg)
            }

            62% {
                -webkit-transform: translate(-4px, -10px) rotate(-1.5deg)
            }

            64% {
                -webkit-transform: translate(-4px, -9px) rotate(-2.5deg)
            }

            66% {
                -webkit-transform: translate(3px, -8px) rotate(-1.5deg)
            }

            68% {
                -webkit-transform: translate(-5px, -2px) rotate(0.5deg)
            }

            70% {
                -webkit-transform: translate(-3px, -1px) rotate(-3.5deg)
            }

            72% {
                -webkit-transform: translate(9px, -2px) rotate(0.5deg)
            }

            74% {
                -webkit-transform: translate(7px, -6px) rotate(-2.5deg)
            }

            76% {
                -webkit-transform: translate(1px, 2px) rotate(-1.5deg)
            }

            78% {
                -webkit-transform: translate(-3px, -5px) rotate(-1.5deg)
            }

            80% {
                -webkit-transform: translate(-5px, 3px) rotate(2.5deg)
            }

            82% {
                -webkit-transform: translate(-2px, -1px) rotate(-3.5deg)
            }

            84% {
                -webkit-transform: translate(-8px, 7px) rotate(0.5deg)
            }

            86% {
                -webkit-transform: translate(-2px, 4px) rotate(-0.5deg)
            }

            88% {
                -webkit-transform: translate(4px, 7px) rotate(-3.5deg)
            }

            90% {
                -webkit-transform: translate(2px, 7px) rotate(0.5deg)
            }

            92% {
                -webkit-transform: translate(-3px, 6px) rotate(-3.5deg)
            }

            94% {
                -webkit-transform: translate(1px, 8px) rotate(1.5deg)
            }

            96% {
                -webkit-transform: translate(-8px, -2px) rotate(1.5deg)
            }

            98% {
                -webkit-transform: translate(-5px, 6px) rotate(0.5deg)
            }
        }

        @-ms-keyframes shake-hard {
            0% {
                -ms-transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                -ms-transform: translate(-1px, 3px) rotate(-1.5deg)
            }

            4% {
                -ms-transform: translate(0px, -6px) rotate(2.5deg)
            }

            6% {
                -ms-transform: translate(3px, 6px) rotate(-0.5deg)
            }

            8% {
                -ms-transform: translate(-1px, -7px) rotate(0.5deg)
            }

            10% {
                -ms-transform: translate(-3px, -2px) rotate(-2.5deg)
            }

            12% {
                -ms-transform: translate(-6px, 7px) rotate(-3.5deg)
            }

            14% {
                -ms-transform: translate(4px, -4px) rotate(1.5deg)
            }

            16% {
                -ms-transform: translate(-1px, 4px) rotate(0.5deg)
            }

            18% {
                -ms-transform: translate(2px, 9px) rotate(0.5deg)
            }

            20% {
                -ms-transform: translate(-4px, -2px) rotate(0.5deg)
            }

            22% {
                -ms-transform: translate(0px, 1px) rotate(0.5deg)
            }

            24% {
                -ms-transform: translate(-2px, 0px) rotate(1.5deg)
            }

            26% {
                -ms-transform: translate(3px, -2px) rotate(-3.5deg)
            }

            28% {
                -ms-transform: translate(4px, -9px) rotate(-0.5deg)
            }

            30% {
                -ms-transform: translate(6px, -7px) rotate(2.5deg)
            }

            32% {
                -ms-transform: translate(6px, -9px) rotate(-2.5deg)
            }

            34% {
                -ms-transform: translate(1px, 4px) rotate(-3.5deg)
            }

            36% {
                -ms-transform: translate(7px, -5px) rotate(-0.5deg)
            }

            38% {
                -ms-transform: translate(9px, -6px) rotate(-1.5deg)
            }

            40% {
                -ms-transform: translate(-7px, 6px) rotate(2.5deg)
            }

            42% {
                -ms-transform: translate(-8px, -9px) rotate(0.5deg)
            }

            44% {
                -ms-transform: translate(-9px, -6px) rotate(1.5deg)
            }

            46% {
                -ms-transform: translate(6px, 6px) rotate(-3.5deg)
            }

            48% {
                -ms-transform: translate(-6px, 9px) rotate(-1.5deg)
            }

            50% {
                -ms-transform: translate(8px, 1px) rotate(2.5deg)
            }

            52% {
                -ms-transform: translate(-8px, 2px) rotate(-3.5deg)
            }

            54% {
                -ms-transform: translate(3px, 3px) rotate(0.5deg)
            }

            56% {
                -ms-transform: translate(-7px, -7px) rotate(0.5deg)
            }

            58% {
                -ms-transform: translate(-6px, -5px) rotate(0.5deg)
            }

            60% {
                -ms-transform: translate(-4px, 9px) rotate(-3.5deg)
            }

            62% {
                -ms-transform: translate(-2px, -4px) rotate(-3.5deg)
            }

            64% {
                -ms-transform: translate(9px, -2px) rotate(-3.5deg)
            }

            66% {
                -ms-transform: translate(-4px, 0px) rotate(-0.5deg)
            }

            68% {
                -ms-transform: translate(3px, -2px) rotate(-2.5deg)
            }

            70% {
                -ms-transform: translate(6px, -6px) rotate(-3.5deg)
            }

            72% {
                -ms-transform: translate(4px, -6px) rotate(-3.5deg)
            }

            74% {
                -ms-transform: translate(1px, 7px) rotate(-0.5deg)
            }

            76% {
                -ms-transform: translate(-2px, 8px) rotate(2.5deg)
            }

            78% {
                -ms-transform: translate(2px, -2px) rotate(-1.5deg)
            }

            80% {
                -ms-transform: translate(6px, 8px) rotate(0.5deg)
            }

            82% {
                -ms-transform: translate(0px, 0px) rotate(-3.5deg)
            }

            84% {
                -ms-transform: translate(-5px, -5px) rotate(-2.5deg)
            }

            86% {
                -ms-transform: translate(-3px, 2px) rotate(2.5deg)
            }

            88% {
                -ms-transform: translate(7px, -9px) rotate(-2.5deg)
            }

            90% {
                -ms-transform: translate(5px, -5px) rotate(-3.5deg)
            }

            92% {
                -ms-transform: translate(-2px, 8px) rotate(0.5deg)
            }

            94% {
                -ms-transform: translate(-5px, -9px) rotate(-2.5deg)
            }

            96% {
                -ms-transform: translate(8px, -9px) rotate(0.5deg)
            }

            98% {
                -ms-transform: translate(-9px, 4px) rotate(1.5deg)
            }
        }

        @keyframes shake-hard {
            0% {
                transform: translate(0px, 0px) rotate(0deg)
            }

            2% {
                transform: translate(0px, 4px) rotate(0.5deg)
            }

            4% {
                transform: translate(6px, -2px) rotate(-3.5deg)
            }

            6% {
                transform: translate(-3px, -8px) rotate(-2.5deg)
            }

            8% {
                transform: translate(-1px, 9px) rotate(2.5deg)
            }

            10% {
                transform: translate(6px, 5px) rotate(-2.5deg)
            }

            12% {
                transform: translate(-3px, 6px) rotate(-2.5deg)
            }

            14% {
                transform: translate(-9px, 1px) rotate(-0.5deg)
            }

            16% {
                transform: translate(-6px, 5px) rotate(2.5deg)
            }

            18% {
                transform: translate(-9px, 8px) rotate(0.5deg)
            }

            20% {
                transform: translate(-9px, 6px) rotate(-2.5deg)
            }

            22% {
                transform: translate(-5px, 6px) rotate(0.5deg)
            }

            24% {
                transform: translate(6px, 3px) rotate(1.5deg)
            }

            26% {
                transform: translate(8px, -10px) rotate(-2.5deg)
            }

            28% {
                transform: translate(0px, -5px) rotate(-3.5deg)
            }

            30% {
                transform: translate(6px, -10px) rotate(2.5deg)
            }

            32% {
                transform: translate(3px, 0px) rotate(-3.5deg)
            }

            34% {
                transform: translate(4px, -6px) rotate(-3.5deg)
            }

            36% {
                transform: translate(-5px, 4px) rotate(-0.5deg)
            }

            38% {
                transform: translate(-7px, -6px) rotate(-1.5deg)
            }

            40% {
                transform: translate(4px, -9px) rotate(-3.5deg)
            }

            42% {
                transform: translate(-9px, -2px) rotate(-1.5deg)
            }

            44% {
                transform: translate(0px, -3px) rotate(1.5deg)
            }

            46% {
                transform: translate(-5px, -5px) rotate(-2.5deg)
            }

            48% {
                transform: translate(-6px, 2px) rotate(-3.5deg)
            }

            50% {
                transform: translate(0px, -5px) rotate(-1.5deg)
            }

            52% {
                transform: translate(6px, 1px) rotate(-2.5deg)
            }

            54% {
                transform: translate(9px, 6px) rotate(2.5deg)
            }

            56% {
                transform: translate(-8px, -10px) rotate(-0.5deg)
            }

            58% {
                transform: translate(6px, -2px) rotate(-1.5deg)
            }

            60% {
                transform: translate(-4px, -8px) rotate(-1.5deg)
            }

            62% {
                transform: translate(0px, -9px) rotate(0.5deg)
            }

            64% {
                transform: translate(-7px, -6px) rotate(2.5deg)
            }

            66% {
                transform: translate(8px, 6px) rotate(2.5deg)
            }

            68% {
                transform: translate(-10px, -7px) rotate(-2.5deg)
            }

            70% {
                transform: translate(-1px, 9px) rotate(-2.5deg)
            }

            72% {
                transform: translate(-6px, 8px) rotate(-2.5deg)
            }

            74% {
                transform: translate(2px, 5px) rotate(-1.5deg)
            }

            76% {
                transform: translate(-7px, 6px) rotate(1.5deg)
            }

            78% {
                transform: translate(3px, -9px) rotate(0.5deg)
            }

            80% {
                transform: translate(-4px, -9px) rotate(-1.5deg)
            }

            82% {
                transform: translate(0px, 7px) rotate(0.5deg)
            }

            84% {
                transform: translate(-4px, -3px) rotate(-1.5deg)
            }

            86% {
                transform: translate(-10px, 8px) rotate(-0.5deg)
            }

            88% {
                transform: translate(-9px, 1px) rotate(-0.5deg)
            }

            90% {
                transform: translate(-3px, 6px) rotate(1.5deg)
            }

            92% {
                transform: translate(-8px, -10px) rotate(-3.5deg)
            }

            94% {
                transform: translate(-8px, -7px) rotate(2.5deg)
            }

            96% {
                transform: translate(-2px, 1px) rotate(2.5deg)
            }

            98% {
                transform: translate(-3px, 4px) rotate(-2.5deg)
            }
        }

 

3. shake 源码包