dingzhaoqiang
dingzhaoqiang

CSS3-图片悬停抖动

CSS3-图片悬停抖动实例

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>css3鼠标悬停图片抖动效果</title>
    <link href="css/shake.css" rel="stylesheet" media="all">
</head>
<body>
    <div id="wrapper">
        <img class="shake shake-hard" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-slow">shake-slow</p>
        </section>
        <img class="shake shake-slow" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-little">shake-little</p>
        </section>
        <img class="shake shake-little" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-horizontal">shake-horizontal</p>
        </section>
        <img class="shake shake-horizontal" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-vertical">shake-vertical</p>
        </section>
        <img class="shake shake-vertical" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-rotate">shake-rotate</p>
        </section>
        <img class="shake shake-rotate" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-opacity">shake-opacity</p>
        </section>
        <img class="shake shake-opacity" src="img/bg.jpg" alt="musica_byern" width="600">
        <section>
            <p class="shake shake-crazy">shake-crazy</p>
        </section>
        <img class="shake shake-crazy" src="img/bg.jpg" alt="musica_byern" width="600">
    </div>
</body>
</html>

shake.css

 www.lanrenzhijia.com */
#wrapper {
margin: 0 auto;
width: 90%;
text-align: center;
}
#wrapper p {
font-family: helvetica;
font-weight: bold;
font-size: 80px;
color: red;
}
.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
}
.shake.freez.shake-slow {
-webkit-animation-name: shake-slow;
-ms-animation-name: shake-slow;
animation-name: shake-slow;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-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.shake-little {
-webkit-animation-name: shake-little;
-ms-animation-name: shake-little;
animation-name: shake-little;
-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.shake-horizontal {
-webkit-animation-name: shake-horizontal;
-ms-animation-name: shake-horizontal;
animation-name: shake-horizontal;
-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.shake-vertical {
-webkit-animation-name: shake-vertical;
-ms-animation-name: shake-vertical;
animation-name: shake-vertical;
-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.shake-rotate {
-webkit-animation-name: shake-rotate;
-ms-animation-name: shake-rotate;
animation-name: shake-rotate;
-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.shake-opacity {
-webkit-animation-name: shake-opacity;
-ms-animation-name: shake-opacity;
animation-name: shake-opacity;
-webkit-animation-duration: 200ms;
-ms-animation-duration: 200ms;
animation-duration: 200ms;
-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.shake-crazy {
-webkit-animation-name: shake-crazy;
-ms-animation-name: shake-crazy;
animation-name: shake-crazy;
-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:hover {
-webkit-animation-play-state: running !important;
-ms-animation-play-state: running !important;
animation-play-state: running !important
}
.shake.shake-hard:hover {
-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
}
.shake.shake-slow:hover {
-webkit-animation-name: shake-slow;
-ms-animation-name: shake-slow;
animation-name: shake-slow;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-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.shake-little:hover {
-webkit-animation-name: shake-little;
-ms-animation-name: shake-little;
animation-name: shake-little;
-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.shake-horizontal:hover {
-webkit-animation-name: shake-horizontal;
-ms-animation-name: shake-horizontal;
animation-name: shake-horizontal;
-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.shake-vertical:hover {
-webkit-animation-name: shake-vertical;
-ms-animation-name: shake-vertical;
animation-name: shake-vertical;
-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.shake-rotate:hover {
-webkit-animation-name: shake-rotate;
-ms-animation-name: shake-rotate;
animation-name: shake-rotate;
-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.shake-opacity:hover {
-webkit-animation-name: shake-opacity;
-ms-animation-name: shake-opacity;
animation-name: shake-opacity;
-webkit-animation-duration: 200ms;
-ms-animation-duration: 200ms;
animation-duration: 200ms;
-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.shake-crazy:hover {
-webkit-animation-name: shake-crazy;
-ms-animation-name: shake-crazy;
animation-name: shake-crazy;
-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.shake-constant {
-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.shake-constant.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
}
.shake.shake-constant.shake-slow {
-webkit-animation-name: shake-slow;
-ms-animation-name: shake-slow;
animation-name: shake-slow;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-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.shake-constant.shake-little {
-webkit-animation-name: shake-little;
-ms-animation-name: shake-little;
animation-name: shake-little;
-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.shake-constant.shake-horizontal {
-webkit-animation-name: shake-horizontal;
-ms-animation-name: shake-horizontal;
animation-name: shake-horizontal;
-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.shake-constant.shake-vertical {
-webkit-animation-name: shake-vertical;
-ms-animation-name: shake-vertical;
animation-name: shake-vertical;
-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.shake-constant.shake-rotate {
-webkit-animation-name: shake-rotate;
-ms-animation-name: shake-rotate;
animation-name: shake-rotate;
-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.shake-constant.shake-opacity {
-webkit-animation-name: shake-opacity;
-ms-animation-name: shake-opacity;
animation-name: shake-opacity;
-webkit-animation-duration: 200ms;
-ms-animation-duration: 200ms;
animation-duration: 200ms;
-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.shake-constant.shake-crazy {
-webkit-animation-name: shake-crazy;
-ms-animation-name: shake-crazy;
animation-name: shake-crazy;
-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.shake-constant.hover-stop:hover {
-webkit-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused
}
.shake.shake-delay {
-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: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running
}
@-webkit-keyframes shake-base {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(1.5px, -2.5px) rotate(-1.5deg)
}
 4% {
 -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg)
}
 6% {
 -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg)
}
 8% {
 -webkit-transform: translate(1.5px, 1.5px) rotate(-0.5deg)
}
 10% {
 -webkit-transform: translate(1.5px, 0.5px) rotate(0.5deg)
}
 12% {
 -webkit-transform: translate(0.5px, -1.5px) rotate(-1.5deg)
}
 14% {
 -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
}
 16% {
 -webkit-transform: translate(0.5px, 1.5px) rotate(-1.5deg)
}
 18% {
 -webkit-transform: translate(-1.5px, 1.5px) rotate(-0.5deg)
}
 20% {
 -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg)
}
 22% {
 -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
}
 24% {
 -webkit-transform: translate(-2.5px, 1.5px) rotate(-1.5deg)
}
 26% {
 -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg)
}
 28% {
 -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg)
}
 30% {
 -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg)
}
 32% {
 -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg)
}
 34% {
 -webkit-transform: translate(1.5px, -0.5px) rotate(0.5deg)
}
 36% {
 -webkit-transform: translate(-1.5px, -1.5px) rotate(-0.5deg)
}
 38% {
 -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg)
}
 40% {
 -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
}
 42% {
 -webkit-transform: translate(-0.5px, 1.5px) rotate(-1.5deg)
}
 44% {
 -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg)
}
 46% {
 -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg)
}
 48% {
 -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg)
}
 50% {
 -webkit-transform: translate(0.5px, -1.5px) rotate(-1.5deg)
}
 52% {
 -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg)
}
 54% {
 -webkit-transform: translate(1.5px, -0.5px) rotate(-1.5deg)
}
 56% {
 -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg)
}
 58% {
 -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg)
}
 60% {
 -webkit-transform: translate(-0.5px, -0.5px) rotate(0.5deg)
}
 62% {
 -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg)
}
 64% {
 -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg)
}
 66% {
 -webkit-transform: translate(-0.5px, -2.5px) rotate(0.5deg)
}
 68% {
 -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg)
}
 70% {
 -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg)
}
 72% {
 -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
}
 74% {
 -webkit-transform: translate(-1.5px, 1.5px) rotate(-0.5deg)
}
 76% {
 -webkit-transform: translate(-1.5px, -2.5px) rotate(0.5deg)
}
 78% {
 -webkit-transform: translate(-1.5px, -2.5px) rotate(-0.5deg)
}
 80% {
 -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg)
}
 82% {
 -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg)
}
 84% {
 -webkit-transform: translate(-0.5px, -1.5px) rotate(-1.5deg)
}
 86% {
 -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg)
}
 88% {
 -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
}
 90% {
 -webkit-transform: translate(-0.5px, 0.5px) rotate(-1.5deg)
}
 92% {
 -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg)
}
 94% {
 -webkit-transform: translate(0.5px, 1.5px) rotate(-1.5deg)
}
 96% {
 -webkit-transform: translate(1.5px, -0.5px) rotate(-1.5deg)
}
 98% {
 -webkit-transform: translate(-0.5px, 0.5px) rotate(-0.5deg)
}
}
@-ms-keyframes shake-base {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -ms-transform: translate(-2.5px, 1.5px) rotate(-1.5deg)
}
 4% {
 -ms-transform: translate(0.5px, -0.5px) rotate(-0.5deg)
}
 6% {
 -ms-transform: translate(1.5px, 1.5px) rotate(0.5deg)
}
 8% {
 -ms-transform: translate(1.5px, -2.5px) rotate(0.5deg)
}
 10% {
 -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg)
}
 12% {
 -ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)
}
 14% {
 -ms-transform: translate(-1.5px, -1.5px) rotate(-1.5deg)
}
 16% {
 -ms-transform: translate(-1.5px, -0.5px) rotate(-1.5deg)
}
 18% {
 -ms-transform: translate(-1.5px, -1.5px) rotate(0.5deg)
}
 20% {
 -ms-transform: translate(-1.5px, 0.5px) rotate(-1.5deg)
}
 22% {
 -ms-transform: translate(1.5px, 1.5px) rotate(-1.5deg)
}
 24% {
 -ms-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
}
 26% {
 -ms-transform: translate(1.5px, -2.5px) rotate(0.5deg)
}
 28% {
 -ms-transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
}
 30% {
 -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg)
}
 32% {
 -ms-transform: translate(0.5px, -1.5px) rotate(-1.5deg)
}
 34% {
 -ms-transform: translate(0.5px, -2.5px) rotate(0.5deg)
}
 36% {
 -ms-transform: translate(-1.5px, 1.5px) rotate(0.5deg)
}
 38% {
 -ms-transform: translate(-1.5px, -0.5px) rotate(0.5deg)
}
 40% {
 -ms-transform: translate(1.5px, -1.5px) rotate(0.5deg)
}
 42% {
 -ms-transform: translate(0.5px, 0.5px) rotate(-0.5deg)
}
 44% {
 -ms-transform: translate(-0.5px, -1.5px) rotate(0.5deg)
}
 46% {
 -ms-transform: translate(-0.5px, -0.5px) rotate(-1.5deg)
}
 48% {
 -ms-transform: translate(-1.5px, 1.5px) rotate(-1.5deg)
}
 50% {
 -ms-transform: translate(-0.5px, -2.5px) rotate(-1.5deg)
}
 52% {
 -ms-transform: translate(0.5px, 0.5px) rotate(-1.5deg)
}
 54% {
 -ms-transform: translate(0.5px, 1.5px) rotate(-0.5deg)
}
 56% {
 -ms-transform: translate(0.5px, -0.5px) rotate(-0.5deg)
}
 58% {
 -ms-transform: translate(-2.5px, -0.5px) rotate(0.5deg)
}
 60% {
 -ms-transform: translate(1.5px, 0.5px) rotate(-0.5deg)
}
 62% {
 -ms-transform: translate(-2.5px, 1.5px) rotate(-1.5deg)
}
 64% {
 -ms-transform: translate(0.5px, -1.5px) rotate(-0.5deg)
}
 66% {
 -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg)
}
 68% {
 -ms-transform: translate(1.5px, 1.5px) rotate(-0.5deg)
}
 70% {
 -ms-transform: translate(-0.5px, 1.5px) rotate(-1.5deg)
}
 72% {
 -ms-transform: translate(1.5px, -1.5px) rotate(-0.5deg)
}
 74% {
 -ms-transform: translate(-0.5px, 1.5px) rotate(-1.5deg)
}
 76% {
 -ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)
}
 78% {
 -ms-transform: translate(-0.5px, 0.5px) rotate(0.5deg)
}
 80% {
 -ms-transform: translate(0.5px, -0.5px) rotate(-1.5deg)
}
 82% {
 -ms-transform: translate(1.5px, 0.5px) rotate(0.5deg)
}
 84% {
 -ms-transform: translate(-2.5px, 0.5px) rotate(-1.5deg)
}
 86% {
 -ms-transform: translate(-1.5px, -0.5px) rotate(-1.5deg)
}
 88% {
 -ms-transform: translate(-2.5px, -1.5px) rotate(0.5deg)
}
 90% {
 -ms-transform: translate(1.5px, 1.5px) rotate(-0.5deg)
}
 92% {
 -ms-transform: translate(0.5px, -0.5px) rotate(-1.5deg)
}
 94% {
 -ms-transform: translate(-1.5px, -2.5px) rotate(-0.5deg)
}
 96% {
 -ms-transform: translate(1.5px, -1.5px) rotate(-0.5deg)
}
 98% {
 -ms-transform: translate(0.5px, 1.5px) rotate(-0.5deg)
}
}
@keyframes shake-base {
 0% {
 transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 transform: translate(-1.5px, 1.5px) rotate(0.5deg)
}
 4% {
 transform: translate(-2.5px, -1.5px) rotate(-1.5deg)
}
 6% {
 transform: translate(-0.5px, 1.5px) rotate(-1.5deg)
}
 8% {
 transform: translate(1.5px, -0.5px) rotate(-1.5deg)
}
 10% {
 transform: translate(0.5px, -0.5px) rotate(-0.5deg)
}
 12% {
 transform: translate(0.5px, -1.5px) rotate(-0.5deg)
}
 14% {
 transform: translate(-0.5px, 0.5px) rotate(-1.5deg)
}
 16% {
 transform: translate(1.5px, -0.5px) rotate(0.5deg)
}
 18% {
 transform: translate(1.5px, 1.5px) rotate(0.5deg)
}
 20% {
 transform: translate(-2.5px, 0.5px) rotate(0.5deg)
}
 22% {
 transform: translate(-0.5px, 0.5px) rotate(-0.5deg)
}
 24% {
 transform: translate(1.5px, -1.5px) rotate(0.5deg)
}
 26% {
 transform: translate(-2.5px, 1.5px) rotate(-0.5deg)
}
 28% {
 transform: translate(-2.5px, 0.5px) rotate(-0.5deg)
}
 30% {
 transform: translate(1.5px, 1.5px) rotate(-0.5deg)
}
 32% {
 transform: translate(0.5px, 1.5px) rotate(0.5deg)
}
 34% {
 transform: translate(1.5px, 1.5px) rotate(-0.5deg)
}
 36% {
 transform: translate(1.5px, -1.5px) rotate(-0.5deg)
}
 38% {
 transform: translate(-1.5px, 1.5px) rotate(0.5deg)
}
 40% {
 transform: translate(0.5px, -2.5px) rotate(-0.5deg)
}
 42% {
 transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
}
 44% {
 transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
}
 46% {
 transform: translate(-1.5px, -0.5px) rotate(-0.5deg)
}
 48% {
 transform: translate(-2.5px, 1.5px) rotate(-0.5deg)
}
 50% {
 transform: translate(-0.5px, -2.5px) rotate(0.5deg)
}
 52% {
 transform: translate(0.5px, 1.5px) rotate(-1.5deg)
}
 54% {
 transform: translate(-0.5px, -2.5px) rotate(0.5deg)
}
 56% {
 transform: translate(-0.5px, 0.5px) rotate(-0.5deg)
}
 58% {
 transform: translate(-0.5px, 1.5px) rotate(0.5deg)
}
 60% {
 transform: translate(0.5px, -2.5px) rotate(0.5deg)
}
 62% {
 transform: translate(1.5px, -2.5px) rotate(0.5deg)
}
 64% {
 transform: translate(-1.5px, 1.5px) rotate(-0.5deg)
}
 66% {
 transform: translate(-0.5px, 1.5px) rotate(-0.5deg)
}
 68% {
 transform: translate(-1.5px, -0.5px) rotate(0.5deg)
}
 70% {
 transform: translate(0.5px, 0.5px) rotate(-0.5deg)
}
 72% {
 transform: translate(1.5px, 1.5px) rotate(0.5deg)
}
 74% {
 transform: translate(1.5px, -1.5px) rotate(-1.5deg)
}
 76% {
 transform: translate(1.5px, 1.5px) rotate(-1.5deg)
}
 78% {
 transform: translate(-2.5px, -1.5px) rotate(-1.5deg)
}
 80% {
 transform: translate(0.5px, 1.5px) rotate(-0.5deg)
}
 82% {
 transform: translate(-2.5px, -1.5px) rotate(0.5deg)
}
 84% {
 transform: translate(-0.5px, -1.5px) rotate(-0.5deg)
}
 86% {
 transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
}
 88% {
 transform: translate(1.5px, 0.5px) rotate(-0.5deg)
}
 90% {
 transform: translate(0.5px, -1.5px) rotate(-1.5deg)
}
 92% {
 transform: translate(0.5px, 0.5px) rotate(-1.5deg)
}
 94% {
 transform: translate(1.5px, 1.5px) rotate(0.5deg)
}
 96% {
 transform: translate(-1.5px, -1.5px) rotate(-1.5deg)
}
 98% {
 transform: translate(-2.5px, -0.5px) rotate(-1.5deg)
}
}
@-webkit-keyframes shake-little {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 4% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 6% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 8% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 10% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 12% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 14% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 16% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 18% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 20% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 22% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 24% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 26% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 28% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 30% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 32% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 34% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 36% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 38% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 40% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 42% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 44% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 46% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 48% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 50% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 52% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 54% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 56% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 58% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 60% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 62% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 64% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 66% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 68% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 70% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 72% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 74% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 76% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 78% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 80% {
 -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
}
 82% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 84% {
 -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 86% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 88% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 90% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 92% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 94% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 96% {
 -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 98% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
}
@-ms-keyframes shake-little {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 4% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 6% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 8% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 10% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 12% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 14% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 16% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 18% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 20% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 22% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 24% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 26% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 28% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 30% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 32% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 34% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 36% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 38% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 40% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 42% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 44% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 46% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 48% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 50% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 52% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 54% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 56% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 58% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 60% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 62% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 64% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 66% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 68% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 70% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 72% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 74% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 76% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 78% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 80% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 82% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 84% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 86% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 88% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 90% {
 -ms-transform: translate(-1px, -1px) rotate(-0.5deg)
}
 92% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 94% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
 96% {
 -ms-transform: translate(-1px, 0px) rotate(-0.5deg)
}
 98% {
 -ms-transform: translate(0px, -1px) rotate(-0.5deg)
}
}
@keyframes shake-little {
 0% {
 transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 4% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 6% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 8% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 10% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 12% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 14% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 16% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 18% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 20% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 22% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 24% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 26% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 28% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 30% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 32% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 34% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 36% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 38% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 40% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 42% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 44% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 46% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 48% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 50% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 52% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 54% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 56% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 58% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 60% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 62% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 64% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 66% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 68% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 70% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 72% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 74% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 76% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 78% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 80% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 82% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 84% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 86% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 88% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 90% {
 transform: translate(-1px, -1px) rotate(-0.5deg)
}
 92% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 94% {
 transform: translate(-1px, 0px) rotate(-0.5deg)
}
 96% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
 98% {
 transform: translate(0px, -1px) rotate(-0.5deg)
}
}
@-webkit-keyframes shake-slow {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(-1px, 8px) rotate(1.5deg)
}
 4% {
 -webkit-transform: translate(7px, 0px) rotate(-0.5deg)
}
 6% {
 -webkit-transform: translate(8px, 8px) rotate(-3.5deg)
}
 8% {
 -webkit-transform: translate(-4px, -3px) rotate(-1.5deg)
}
 10% {
 -webkit-transform: translate(5px, 0px) rotate(-2.5deg)
}
 12% {
 -webkit-transform: translate(-10px, -3px) rotate(-3.5deg)
}
 14% {
 -webkit-transform: translate(5px, 7px) rotate(2.5deg)
}
 16% {
 -webkit-transform: translate(8px, -8px) rotate(-1.5deg)
}
 18% {
 -webkit-transform: translate(9px, -6px) rotate(-3.5deg)
}
 20% {
 -webkit-transform: translate(3px, 1px) rotate(-0.5deg)
}
 22% {
 -webkit-transform: translate(6px, 8px) rotate(-2.5deg)
}
 24% {
 -webkit-transform: translate(-8px, -1px) rotate(2.5deg)
}
 26% {
 -webkit-transform: translate(7px, -10px) rotate(0.5deg)
}
 28% {
 -webkit-transform: translate(7px, -4px) rotate(-3.5deg)
}
 30% {
 -webkit-transform: translate(-2px, -6px) rotate(-1.5deg)
}
 32% {
 -webkit-transform: translate(-1px, 0px) rotate(2.5deg)
}
 34% {
 -webkit-transform: translate(6px, 2px) rotate(-0.5deg)
}
 36% {
 -webkit-transform: translate(2px, 7px) rotate(1.5deg)
}
 38% {
 -webkit-transform: translate(2px, -9px) rotate(1.5deg)
}
 40% {
 -webkit-transform: translate(-5px, -1px) rotate(-0.5deg)
}
 42% {
 -webkit-transform: translate(-8px, 2px) rotate(-0.5deg)
}
 44% {
 -webkit-transform: translate(-4px, 3px) rotate(0.5deg)
}
 46% {
 -webkit-transform: translate(-10px, -2px) rotate(-0.5deg)
}
 48% {
 -webkit-transform: translate(1px, 9px) rotate(1.5deg)
}
 50% {
 -webkit-transform: translate(6px, 7px) rotate(1.5deg)
}
 52% {
 -webkit-transform: translate(-8px, 4px) rotate(0.5deg)
}
 54% {
 -webkit-transform: translate(6px, -8px) rotate(-2.5deg)
}
 56% {
 -webkit-transform: translate(2px, -9px) rotate(-2.5deg)
}
 58% {
 -webkit-transform: translate(-2px, -9px) rotate(0.5deg)
}
 60% {
 -webkit-transform: translate(2px, 7px) rotate(-0.5deg)
}
 62% {
 -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
}
 64% {
 -webkit-transform: translate(-9px, -4px) rotate(-3.5deg)
}
 66% {
 -webkit-transform: translate(6px, -6px) rotate(0.5deg)
}
 68% {
 -webkit-transform: translate(0px, -7px) rotate(-2.5deg)
}
 70% {
 -webkit-transform: translate(-10px, 1px) rotate(1.5deg)
}
 72% {
 -webkit-transform: translate(-7px, 9px) rotate(2.5deg)
}
 74% {
 -webkit-transform: translate(2px, -6px) rotate(-0.5deg)
}
 76% {
 -webkit-transform: translate(5px, 1px) rotate(-0.5deg)
}
 78% {
 -webkit-transform: translate(-1px, 5px) rotate(2.5deg)
}
 80% {
 -webkit-transform: translate(3px, 7px) rotate(2.5deg)
}
 82% {
 -webkit-transform: translate(-6px, -7px) rotate(-0.5deg)
}
 84% {
 -webkit-transform: translate(-8px, 8px) rotate(-2.5deg)
}
 86% {
 -webkit-transform: translate(8px, 3px) rotate(-2.5deg)
}
 88% {
 -webkit-transform: translate(-8px, 3px) rotate(-1.5deg)
}
 90% {
 -webkit-transform: translate(-7px, -4px) rotate(-3.5deg)
}
 92% {
 -webkit-transform: translate(-8px, 4px) rotate(2.5deg)
}
 94% {
 -webkit-transform: translate(-6px, -6px) rotate(-3.5deg)
}
 96% {
 -webkit-transform: translate(-3px, 2px) rotate(-3.5deg)
}
 98% {
 -webkit-transform: translate(2px, 1px) rotate(-0.5deg)
}
}
@-ms-keyframes shake-slow {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -ms-transform: translate(-9px, 1px) rotate(-1.5deg)
}
 4% {
 -ms-transform: translate(-10px, -1px) rotate(-3.5deg)
}
 6% {
 -ms-transform: translate(6px, 2px) rotate(-1.5deg)
}
 8% {
 -ms-transform: translate(-3px, -6px) rotate(-1.5deg)
}
 10% {
 -ms-transform: translate(-10px, -3px) rotate(-0.5deg)
}
 12% {
 -ms-transform: translate(-8px, 6px) rotate(-2.5deg)
}
 14% {
 -ms-transform: translate(7px, 5px) rotate(-1.5deg)
}
 16% {
 -ms-transform: translate(2px, 2px) rotate(1.5deg)
}
 18% {
 -ms-transform: translate(8px, -2px) rotate(-3.5deg)
}
 20% {
 -ms-transform: translate(-9px, 3px) rotate(-3.5deg)
}
 22% {
 -ms-transform: translate(8px, -4px) rotate(-1.5deg)
}
 24% {
 -ms-transform: translate(-1px, -7px) rotate(2.5deg)
}
 26% {
 -ms-transform: translate(9px, 9px) rotate(-0.5deg)
}
 28% {
 -ms-transform: translate(9px, -4px) rotate(-3.5deg)
}
 30% {
 -ms-transform: translate(6px, -7px) rotate(-0.5deg)
}
 32% {
 -ms-transform: translate(9px, 2px) rotate(1.5deg)
}
 34% {
 -ms-transform: translate(3px, -9px) rotate(2.5deg)
}
 36% {
 -ms-transform: translate(-6px, -4px) rotate(2.5deg)
}
 38% {
 -ms-transform: translate(-5px, -9px) rotate(0.5deg)
}
 40% {
 -ms-transform: translate(6px, 9px) rotate(-2.5deg)
}
 42% {
 -ms-transform: translate(5px, -5px) rotate(0.5deg)
}
 44% {
 -ms-transform: translate(8px, 5px) rotate(-3.5deg)
}
 46% {
 -ms-transform: translate(-2px, 9px) rotate(1.5deg)
}
 48% {
 -ms-transform: translate(-10px, -5px) rotate(-2.5deg)
}
 50% {
 -ms-transform: translate(8px, -1px) rotate(-3.5deg)
}
 52% {
 -ms-transform: translate(-5px, -7px) rotate(2.5deg)
}
 54% {
 -ms-transform: translate(7px, 0px) rotate(2.5deg)
}
 56% {
 -ms-transform: translate(-5px, -1px) rotate(-0.5deg)
}
 58% {
 -ms-transform: translate(0px, -4px) rotate(-3.5deg)
}
 60% {
 -ms-transform: translate(-10px, 2px) rotate(2.5deg)
}
 62% {
 -ms-transform: translate(9px, 8px) rotate(0.5deg)
}
 64% {
 -ms-transform: translate(-4px, -4px) rotate(-1.5deg)
}
 66% {
 -ms-transform: translate(-1px, -9px) rotate(-0.5deg)
}
 68% {
 -ms-transform: translate(-6px, -9px) rotate(-2.5deg)
}
 70% {
 -ms-transform: translate(-6px, -8px) rotate(-1.5deg)
}
 72% {
 -ms-transform: translate(-2px, -3px) rotate(-2.5deg)
}
 74% {
 -ms-transform: translate(-8px, 1px) rotate(-0.5deg)
}
 76% {
 -ms-transform: translate(-7px, 7px) rotate(2.5deg)
}
 78% {
 -ms-transform: translate(7px, 2px) rotate(-3.5deg)
}
 80% {
 -ms-transform: translate(-10px, -4px) rotate(-0.5deg)
}
 82% {
 -ms-transform: translate(2px, -9px) rotate(1.5deg)
}
 84% {
 -ms-transform: translate(3px, 5px) rotate(1.5deg)
}
 86% {
 -ms-transform: translate(5px, 2px) rotate(2.5deg)
}
 88% {
 -ms-transform: translate(-5px, -1px) rotate(-1.5deg)
}
 90% {
 -ms-transform: translate(-1px, -9px) rotate(1.5deg)
}
 92% {
 -ms-transform: translate(8px, -6px) rotate(-3.5deg)
}
 94% {
 -ms-transform: translate(7px, -9px) rotate(-2.5deg)
}
 96% {
 -ms-transform: translate(4px, -5px) rotate(2.5deg)
}
 98% {
 -ms-transform: translate(8px, 0px) rotate(-3.5deg)
}
}
@keyframes shake-slow {
 0% {
 transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 transform: translate(-6px, -8px) rotate(2.5deg)
}
 4% {
 transform: translate(3px, -9px) rotate(-0.5deg)
}
 6% {
 transform: translate(3px, -8px) rotate(2.5deg)
}
 8% {
 transform: translate(0px, 5px) rotate(0.5deg)
}
 10% {
 transform: translate(3px, 2px) rotate(0.5deg)
}
 12% {
 transform: translate(8px, 0px) rotate(0.5deg)
}
 14% {
 transform: translate(4px, 7px) rotate(-3.5deg)
}
 16% {
 transform: translate(-4px, 0px) rotate(-0.5deg)
}
 18% {
 transform: translate(1px, 3px) rotate(-1.5deg)
}
 20% {
 transform: translate(-8px, -1px) rotate(-3.5deg)
}
 22% {
 transform: translate(5px, 9px) rotate(2.5deg)
}
 24% {
 transform: translate(-9px, -10px) rotate(-2.5deg)
}
 26% {
 transform: translate(0px, 7px) rotate(-1.5deg)
}
 28% {
 transform: translate(-10px, 7px) rotate(2.5deg)
}
 30% {
 transform: translate(8px, -7px) rotate(-1.5deg)
}
 32% {
 transform: translate(0px, -8px) rotate(-0.5deg)
}
 34% {
 transform: translate(9px, 7px) rotate(-0.5deg)
}
 36% {
 transform: translate(-7px, 6px) rotate(0.5deg)
}
 38% {
 transform: translate(8px, -10px) rotate(-0.5deg)
}
 40% {
 transform: translate(8px, 0px) rotate(0.5deg)
}
 42% {
 transform: translate(0px, -2px) rotate(1.5deg)
}
 44% {
 transform: translate(5px, -2px) rotate(-0.5deg)
}
 46% {
 transform: translate(1px, -10px) rotate(-2.5deg)
}
 48% {
 transform: translate(4px, -1px) rotate(2.5deg)
}
 50% {
 transform: translate(-5px, -4px) rotate(2.5deg)
}
 52% {
 transform: translate(3px, 2px) rotate(-3.5deg)
}
 54% {
 transform: translate(1px, -6px) rotate(-0.5deg)
}
 56% {
 transform: translate(-3px, -4px) rotate(-0.5deg)
}
 58% {
 transform: translate(-10px, -10px) rotate(2.5deg)
}
 60% {
 transform: translate(8px, 7px) rotate(-3.5deg)
}
 62% {
 transform: translate(9px, -6px) rotate(-3.5deg)
}
 64% {
 transform: translate(-5px, 8px) rotate(-0.5deg)
}
 66% {
 transform: translate(1px, -3px) rotate(0.5deg)
}
 68% {
 transform: translate(-6px, 9px) rotate(1.5deg)
}
 70% {
 transform: translate(-5px, 8px) rotate(-1.5deg)
}
 72% {
 transform: translate(-10px, -2px) rotate(2.5deg)
}
 74% {
 transform: translate(0px, -4px) rotate(1.5deg)
}
 76% {
 transform: translate(-2px, -5px) rotate(0.5deg)
}
 78% {
 transform: translate(-2px, 9px) rotate(-3.5deg)
}
 80% {
 transform: translate(7px, 4px) rotate(-3.5deg)
}
 82% {
 transform: translate(-1px, -4px) rotate(-1.5deg)
}
 84% {
 transform: translate(3px, -6px) rotate(0.5deg)
}
 86% {
 transform: translate(7px, -8px) rotate(-1.5deg)
}
 88% {
 transform: translate(4px, -9px) rotate(1.5deg)
}
 90% {
 transform: translate(1px, -6px) rotate(2.5deg)
}
 92% {
 transform: translate(-8px, -1px) rotate(-1.5deg)
}
 94% {
 transform: translate(-4px, -1px) rotate(0.5deg)
}
 96% {
 transform: translate(-6px, 9px) rotate(1.5deg)
}
 98% {
 transform: translate(7px, 4px) rotate(-0.5deg)
}
}
@-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)
}
}
@-webkit-keyframes shake-horizontal {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(-8px, 0px) rotate(0deg)
}
 4% {
 -webkit-transform: translate(3px, 0px) rotate(0deg)
}
 6% {
 -webkit-transform: translate(7px, 0px) rotate(0deg)
}
 8% {
 -webkit-transform: translate(1px, 0px) rotate(0deg)
}
 10% {
 -webkit-transform: translate(4px, 0px) rotate(0deg)
}
 12% {
 -webkit-transform: translate(3px, 0px) rotate(0deg)
}
 14% {
 -webkit-transform: translate(7px, 0px) rotate(0deg)
}
 16% {
 -webkit-transform: translate(-3px, 0px) rotate(0deg)
}
 18% {
 -webkit-transform: translate(-5px, 0px) rotate(0deg)
}
 20% {
 -webkit-transform: translate(-10px, 0px) rotate(0deg)
}
 22% {
 -webkit-transform: translate(8px, 0px) rotate(0deg)
}
 24% {
 -webkit-transform: translate(2px, 0px) rotate(0deg)
}
 26% {
 -webkit-transform: translate(2px, 0px) rotate(0deg)
}
 28% {
 -webkit-transform: translate(3px, 0px) rotate(0deg)
}
 30% {
 -webkit-transform: translate(7px, 0px) rotate(0deg)
}
 32% {
 -webkit-transform: translate(-8px, 0px) rotate(0deg)
}
 34% {
 -webkit-transform: translate(-10px, 0px) rotate(0deg)
}
 36% {
 -webkit-transform: translate(8px, 0px) rotate(0deg)
}
 38% {
 -webkit-transform: translate(-5px, 0px) rotate(0deg)
}
 40% {
 -webkit-transform: translate(-1px, 0px) rotate(0deg)
}
 42% {
 -webkit-transform: translate(6px, 0px) rotate(0deg)
}
 44% {
 -webkit-transform: translate(-3px, 0px) rotate(0deg)
}
 46% {
 -webkit-transform: translate(-1px, 0px) rotate(0deg)
}
 48% {
 -webkit-transform: translate(9px, 0px) rotate(0deg)
}
 50% {
 -webkit-transform: translate(-3px, 0px) rotate(0deg)
}
 52% {
 -webkit-transform: translate(8px, 0px) rotate(0deg)
}
 54% {
 -webkit-transform: translate(4px, 0px) rotate(0deg)
}
 56% {
 -webkit-transform: translate(4px, 0px) rotate(0deg)
}
 58% {
 -webkit-transform: translate(2px, 0px) rotate(0deg)
}
 60% {
 -webkit-transform: translate(2px, 0px) rotate(0deg)
}
 62% {
 -webkit-transform: translate(-9px, 0px) rotate(0deg)
}
 64% {
 -webkit-transform: translate(-6px, 0px) rotate(0deg)
}
 66% {
 -webkit-transform: translate(-10px, 0px) rotate(0deg)
}
 68% {
 -webkit-transform: translate(6px, 0px) rotate(0deg)
}
 70% {
 -webkit-transform: translate(7px, 0px) rotate(0deg)
}
 72% {
 -webkit-transform: translate(-1px, 0px) rotate(0deg)
}
 74% {
 -webkit-transform: translate(-1px, 0px) rotate(0deg)
}
 76% {
 -webkit-transform: translate(4px, 0px) rotate(0deg)
}
 78% {
 -webkit-transform: translate(1px, 0px) rotate(0deg)
}
 80% {
 -webkit-transform: translate(-6px, 0px) rotate(0deg)
}
 82% {
 -webkit-transform: translate(-3px, 0px) rotate(0deg)
}
 84% {
 -webkit-transform: translate(-8px, 0px) rotate(0deg)
}
 86% {
 -webkit-transform: translate(5px, 0px) rotate(0deg)
}
 88% {
 -webkit-transform: translate(-3px, 0px) rotate(0deg)
}
 90% {
 -webkit-transform: translate(-7px, 0px) rotate(0deg)
}
 92% {
 -webkit-transform: translate(-4px, 0px) rotate(0deg)
}
 94% {
 -webkit-transform: translate(2px, 0px) rotate(0deg)
}
 96% {
 -webkit-transform: translate(-9px, 0px) rotate(0deg)
}
 98% {
 -webkit-transform: translate(3px, 0px) rotate(0deg)
}
}
@-ms-keyframes shake-horizontal {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -ms-transform: translate(-9px, 0px) rotate(0deg)
}
 4% {
 -ms-transform: translate(3px, 0px) rotate(0deg)
}
 6% {
 -ms-transform: translate(-10px, 0px) rotate(0deg)
}
 8% {
 -ms-transform: translate(2px, 0px) rotate(0deg)
}
 10% {
 -ms-transform: translate(5px, 0px) rotate(0deg)
}
 12% {
 -ms-transform: translate(-9px, 0px) rotate(0deg)
}
 14% {
 -ms-transform: translate(-8px, 0px) rotate(0deg)
}
 16% {
 -ms-transform: translate(6px, 0px) rotate(0deg)
}
 18% {
 -ms-transform: translate(1px, 0px) rotate(0deg)
}
 20% {
 -ms-transform: translate(7px, 0px) rotate(0deg)
}
 22% {
 -ms-transform: translate(4px, 0px) rotate(0deg)
}
 24% {
 -ms-transform: translate(9px, 0px) rotate(0deg)
}
 26% {
 -ms-transform: translate(2px, 0px) rotate(0deg)
}
 28% {
 -ms-transform: translate(4px, 0px) rotate(0deg)
}
 30% {
 -ms-transform: translate(-9px, 0px) rotate(0deg)
}
 32% {
 -ms-transform: translate(9px, 0px) rotate(0deg)
}
 34% {
 -ms-transform: translate(-4px, 0px) rotate(0deg)
}
 36% {
 -ms-transform: translate(-6px, 0px) rotate(0deg)
}
 38% {
 -ms-transform: translate(-3px, 0px) rotate(0deg)
}
 40% {
 -ms-transform: translate(-8px, 0px) rotate(0deg)
}
 42% {
 -ms-transform: translate(-8px, 0px) rotate(0deg)
}
 44% {
 -ms-transform: translate(-2px, 0px) rotate(0deg)
}
 46% {
 -ms-transform: translate(-7px, 0px) rotate(0deg)
}
 48% {
 -ms-transform: translate(-1px, 0px) rotate(0deg)
}
 50% {
 -ms-transform: translate(-8px, 0px) rotate(0deg)
}
 52% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 54% {
 -ms-transform: translate(6px, 0px) rotate(0deg)
}
 56% {
 -ms-transform: translate(1px, 0px) rotate(0deg)
}
 58% {
 -ms-transform: translate(-5px, 0px) rotate(0deg)
}
 60% {
 -ms-transform: translate(9px, 0px) rotate(0deg)
}
 62% {
 -ms-transform: translate(-3px, 0px) rotate(0deg)
}
 64% {
 -ms-transform: translate(-5px, 0px) rotate(0deg)
}
 66% {
 -ms-transform: translate(-6px, 0px) rotate(0deg)
}
 68% {
 -ms-transform: translate(5px, 0px) rotate(0deg)
}
 70% {
 -ms-transform: translate(-3px, 0px) rotate(0deg)
}
 72% {
 -ms-transform: translate(-1px, 0px) rotate(0deg)
}
 74% {
 -ms-transform: translate(-6px, 0px) rotate(0deg)
}
 76% {
 -ms-transform: translate(-2px, 0px) rotate(0deg)
}
 78% {
 -ms-transform: translate(1px, 0px) rotate(0deg)
}
 80% {
 -ms-transform: translate(4px, 0px) rotate(0deg)
}
 82% {
 -ms-transform: translate(7px, 0px) rotate(0deg)
}
 84% {
 -ms-transform: translate(-7px, 0px) rotate(0deg)
}
 86% {
 -ms-transform: translate(-4px, 0px) rotate(0deg)
}
 88% {
 -ms-transform: translate(9px, 0px) rotate(0deg)
}
 90% {
 -ms-transform: translate(-6px, 0px) rotate(0deg)
}
 92% {
 -ms-transform: translate(-3px, 0px) rotate(0deg)
}
 94% {
 -ms-transform: translate(-8px, 0px) rotate(0deg)
}
 96% {
 -ms-transform: translate(4px, 0px) rotate(0deg)
}
 98% {
 -ms-transform: translate(6px, 0px) rotate(0deg)
}
}
@keyframes shake-horizontal {
 0% {
 transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 transform: translate(-7px, 0px) rotate(0deg)
}
 4% {
 transform: translate(7px, 0px) rotate(0deg)
}
 6% {
 transform: translate(5px, 0px) rotate(0deg)
}
 8% {
 transform: translate(9px, 0px) rotate(0deg)
}
 10% {
 transform: translate(9px, 0px) rotate(0deg)
}
 12% {
 transform: translate(3px, 0px) rotate(0deg)
}
 14% {
 transform: translate(9px, 0px) rotate(0deg)
}
 16% {
 transform: translate(-6px, 0px) rotate(0deg)
}
 18% {
 transform: translate(8px, 0px) rotate(0deg)
}
 20% {
 transform: translate(-2px, 0px) rotate(0deg)
}
 22% {
 transform: translate(-1px, 0px) rotate(0deg)
}
 24% {
 transform: translate(0px, 0px) rotate(0deg)
}
 26% {
 transform: translate(-6px, 0px) rotate(0deg)
}
 28% {
 transform: translate(-5px, 0px) rotate(0deg)
}
 30% {
 transform: translate(-4px, 0px) rotate(0deg)
}
 32% {
 transform: translate(-10px, 0px) rotate(0deg)
}
 34% {
 transform: translate(9px, 0px) rotate(0deg)
}
 36% {
 transform: translate(4px, 0px) rotate(0deg)
}
 38% {
 transform: translate(-1px, 0px) rotate(0deg)
}
 40% {
 transform: translate(2px, 0px) rotate(0deg)
}
 42% {
 transform: translate(2px, 0px) rotate(0deg)
}
 44% {
 transform: translate(-4px, 0px) rotate(0deg)
}
 46% {
 transform: translate(8px, 0px) rotate(0deg)
}
 48% {
 transform: translate(-6px, 0px) rotate(0deg)
}
 50% {
 transform: translate(4px, 0px) rotate(0deg)
}
 52% {
 transform: translate(-5px, 0px) rotate(0deg)
}
 54% {
 transform: translate(6px, 0px) rotate(0deg)
}
 56% {
 transform: translate(-5px, 0px) rotate(0deg)
}
 58% {
 transform: translate(0px, 0px) rotate(0deg)
}
 60% {
 transform: translate(3px, 0px) rotate(0deg)
}
 62% {
 transform: translate(5px, 0px) rotate(0deg)
}
 64% {
 transform: translate(-4px, 0px) rotate(0deg)
}
 66% {
 transform: translate(-8px, 0px) rotate(0deg)
}
 68% {
 transform: translate(4px, 0px) rotate(0deg)
}
 70% {
 transform: translate(-5px, 0px) rotate(0deg)
}
 72% {
 transform: translate(7px, 0px) rotate(0deg)
}
 74% {
 transform: translate(-5px, 0px) rotate(0deg)
}
 76% {
 transform: translate(1px, 0px) rotate(0deg)
}
 78% {
 transform: translate(8px, 0px) rotate(0deg)
}
 80% {
 transform: translate(8px, 0px) rotate(0deg)
}
 82% {
 transform: translate(7px, 0px) rotate(0deg)
}
 84% {
 transform: translate(-10px, 0px) rotate(0deg)
}
 86% {
 transform: translate(9px, 0px) rotate(0deg)
}
 88% {
 transform: translate(-1px, 0px) rotate(0deg)
}
 90% {
 transform: translate(0px, 0px) rotate(0deg)
}
 92% {
 transform: translate(-2px, 0px) rotate(0deg)
}
 94% {
 transform: translate(5px, 0px) rotate(0deg)
}
 96% {
 transform: translate(5px, 0px) rotate(0deg)
}
 98% {
 transform: translate(-8px, 0px) rotate(0deg)
}
}
@-webkit-keyframes shake-vertical {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 4% {
 -webkit-transform: translate(0px, -6px) rotate(0deg)
}
 6% {
 -webkit-transform: translate(0px, -7px) rotate(0deg)
}
 8% {
 -webkit-transform: translate(0px, -5px) rotate(0deg)
}
 10% {
 -webkit-transform: translate(0px, 1px) rotate(0deg)
}
 12% {
 -webkit-transform: translate(0px, -1px) rotate(0deg)
}
 14% {
 -webkit-transform: translate(0px, -9px) rotate(0deg)
}
 16% {
 -webkit-transform: translate(0px, -10px) rotate(0deg)
}
 18% {
 -webkit-transform: translate(0px, -9px) rotate(0deg)
}
 20% {
 -webkit-transform: translate(0px, 3px) rotate(0deg)
}
 22% {
 -webkit-transform: translate(0px, -7px) rotate(0deg)
}
 24% {
 -webkit-transform: translate(0px, 2px) rotate(0deg)
}
 26% {
 -webkit-transform: translate(0px, 9px) rotate(0deg)
}
 28% {
 -webkit-transform: translate(0px, 8px) rotate(0deg)
}
 30% {
 -webkit-transform: translate(0px, 8px) rotate(0deg)
}
 32% {
 -webkit-transform: translate(0px, 4px) rotate(0deg)
}
 34% {
 -webkit-transform: translate(0px, -1px) rotate(0deg)
}
 36% {
 -webkit-transform: translate(0px, 7px) rotate(0deg)
}
 38% {
 -webkit-transform: translate(0px, 5px) rotate(0deg)
}
 40% {
 -webkit-transform: translate(0px, -5px) rotate(0deg)
}
 42% {
 -webkit-transform: translate(0px, 5px) rotate(0deg)
}
 44% {
 -webkit-transform: translate(0px, 4px) rotate(0deg)
}
 46% {
 -webkit-transform: translate(0px, 3px) rotate(0deg)
}
 48% {
 -webkit-transform: translate(0px, 6px) rotate(0deg)
}
 50% {
 -webkit-transform: translate(0px, -6px) rotate(0deg)
}
 52% {
 -webkit-transform: translate(0px, -3px) rotate(0deg)
}
 54% {
 -webkit-transform: translate(0px, -4px) rotate(0deg)
}
 56% {
 -webkit-transform: translate(0px, -5px) rotate(0deg)
}
 58% {
 -webkit-transform: translate(0px, 2px) rotate(0deg)
}
 60% {
 -webkit-transform: translate(0px, -2px) rotate(0deg)
}
 62% {
 -webkit-transform: translate(0px, 2px) rotate(0deg)
}
 64% {
 -webkit-transform: translate(0px, -7px) rotate(0deg)
}
 66% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 68% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 70% {
 -webkit-transform: translate(0px, -1px) rotate(0deg)
}
 72% {
 -webkit-transform: translate(0px, 2px) rotate(0deg)
}
 74% {
 -webkit-transform: translate(0px, 3px) rotate(0deg)
}
 76% {
 -webkit-transform: translate(0px, 3px) rotate(0deg)
}
 78% {
 -webkit-transform: translate(0px, -10px) rotate(0deg)
}
 80% {
 -webkit-transform: translate(0px, -5px) rotate(0deg)
}
 82% {
 -webkit-transform: translate(0px, 9px) rotate(0deg)
}
 84% {
 -webkit-transform: translate(0px, 9px) rotate(0deg)
}
 86% {
 -webkit-transform: translate(0px, 1px) rotate(0deg)
}
 88% {
 -webkit-transform: translate(0px, 6px) rotate(0deg)
}
 90% {
 -webkit-transform: translate(0px, -2px) rotate(0deg)
}
 92% {
 -webkit-transform: translate(0px, 4px) rotate(0deg)
}
 94% {
 -webkit-transform: translate(0px, -4px) rotate(0deg)
}
 96% {
 -webkit-transform: translate(0px, -1px) rotate(0deg)
}
 98% {
 -webkit-transform: translate(0px, -8px) rotate(0deg)
}
}
@-ms-keyframes shake-vertical {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -ms-transform: translate(0px, -5px) rotate(0deg)
}
 4% {
 -ms-transform: translate(0px, -1px) rotate(0deg)
}
 6% {
 -ms-transform: translate(0px, -8px) rotate(0deg)
}
 8% {
 -ms-transform: translate(0px, 5px) rotate(0deg)
}
 10% {
 -ms-transform: translate(0px, 9px) rotate(0deg)
}
 12% {
 -ms-transform: translate(0px, -3px) rotate(0deg)
}
 14% {
 -ms-transform: translate(0px, -7px) rotate(0deg)
}
 16% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 18% {
 -ms-transform: translate(0px, -7px) rotate(0deg)
}
 20% {
 -ms-transform: translate(0px, -6px) rotate(0deg)
}
 22% {
 -ms-transform: translate(0px, -7px) rotate(0deg)
}
 24% {
 -ms-transform: translate(0px, 2px) rotate(0deg)
}
 26% {
 -ms-transform: translate(0px, 5px) rotate(0deg)
}
 28% {
 -ms-transform: translate(0px, -3px) rotate(0deg)
}
 30% {
 -ms-transform: translate(0px, -5px) rotate(0deg)
}
 32% {
 -ms-transform: translate(0px, 6px) rotate(0deg)
}
 34% {
 -ms-transform: translate(0px, -1px) rotate(0deg)
}
 36% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 38% {
 -ms-transform: translate(0px, 4px) rotate(0deg)
}
 40% {
 -ms-transform: translate(0px, 6px) rotate(0deg)
}
 42% {
 -ms-transform: translate(0px, -8px) rotate(0deg)
}
 44% {
 -ms-transform: translate(0px, -6px) rotate(0deg)
}
 46% {
 -ms-transform: translate(0px, -9px) rotate(0deg)
}
 48% {
 -ms-transform: translate(0px, -3px) rotate(0deg)
}
 50% {
 -ms-transform: translate(0px, -3px) rotate(0deg)
}
 52% {
 -ms-transform: translate(0px, -2px) rotate(0deg)
}
 54% {
 -ms-transform: translate(0px, -3px) rotate(0deg)
}
 56% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 58% {
 -ms-transform: translate(0px, 8px) rotate(0deg)
}
 60% {
 -ms-transform: translate(0px, 9px) rotate(0deg)
}
 62% {
 -ms-transform: translate(0px, 7px) rotate(0deg)
}
 64% {
 -ms-transform: translate(0px, 1px) rotate(0deg)
}
 66% {
 -ms-transform: translate(0px, -5px) rotate(0deg)
}
 68% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 70% {
 -ms-transform: translate(0px, 9px) rotate(0deg)
}
 72% {
 -ms-transform: translate(0px, 4px) rotate(0deg)
}
 74% {
 -ms-transform: translate(0px, -4px) rotate(0deg)
}
 76% {
 -ms-transform: translate(0px, 5px) rotate(0deg)
}
 78% {
 -ms-transform: translate(0px, -5px) rotate(0deg)
}
 80% {
 -ms-transform: translate(0px, -2px) rotate(0deg)
}
 82% {
 -ms-transform: translate(0px, -8px) rotate(0deg)
}
 84% {
 -ms-transform: translate(0px, -5px) rotate(0deg)
}
 86% {
 -ms-transform: translate(0px, -9px) rotate(0deg)
}
 88% {
 -ms-transform: translate(0px, -8px) rotate(0deg)
}
 90% {
 -ms-transform: translate(0px, 7px) rotate(0deg)
}
 92% {
 -ms-transform: translate(0px, 5px) rotate(0deg)
}
 94% {
 -ms-transform: translate(0px, -6px) rotate(0deg)
}
 96% {
 -ms-transform: translate(0px, -2px) rotate(0deg)
}
 98% {
 -ms-transform: translate(0px, -1px) rotate(0deg)
}
}
@keyframes shake-vertical {
 0% {
 transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 transform: translate(0px, -2px) rotate(0deg)
}
 4% {
 transform: translate(0px, -3px) rotate(0deg)
}
 6% {
 transform: translate(0px, 9px) rotate(0deg)
}
 8% {
 transform: translate(0px, 7px) rotate(0deg)
}
 10% {
 transform: translate(0px, -6px) rotate(0deg)
}
 12% {
 transform: translate(0px, 6px) rotate(0deg)
}
 14% {
 transform: translate(0px, -3px) rotate(0deg)
}
 16% {
 transform: translate(0px, 6px) rotate(0deg)
}
 18% {
 transform: translate(0px, 8px) rotate(0deg)
}
 20% {
 transform: translate(0px, 9px) rotate(0deg)
}
 22% {
 transform: translate(0px, -4px) rotate(0deg)
}
 24% {
 transform: translate(0px, -7px) rotate(0deg)
}
 26% {
 transform: translate(0px, -9px) rotate(0deg)
}
 28% {
 transform: translate(0px, 7px) rotate(0deg)
}
 30% {
 transform: translate(0px, 7px) rotate(0deg)
}
 32% {
 transform: translate(0px, 6px) rotate(0deg)
}
 34% {
 transform: translate(0px, 4px) rotate(0deg)
}
 36% {
 transform: translate(0px, 0px) rotate(0deg)
}
 38% {
 transform: translate(0px, 4px) rotate(0deg)
}
 40% {
 transform: translate(0px, 7px) rotate(0deg)
}
 42% {
 transform: translate(0px, -5px) rotate(0deg)
}
 44% {
 transform: translate(0px, 0px) rotate(0deg)
}
 46% {
 transform: translate(0px, -2px) rotate(0deg)
}
 48% {
 transform: translate(0px, -5px) rotate(0deg)
}
 50% {
 transform: translate(0px, -4px) rotate(0deg)
}
 52% {
 transform: translate(0px, 1px) rotate(0deg)
}
 54% {
 transform: translate(0px, -1px) rotate(0deg)
}
 56% {
 transform: translate(0px, -2px) rotate(0deg)
}
 58% {
 transform: translate(0px, 5px) rotate(0deg)
}
 60% {
 transform: translate(0px, 6px) rotate(0deg)
}
 62% {
 transform: translate(0px, -3px) rotate(0deg)
}
 64% {
 transform: translate(0px, -3px) rotate(0deg)
}
 66% {
 transform: translate(0px, -9px) rotate(0deg)
}
 68% {
 transform: translate(0px, -8px) rotate(0deg)
}
 70% {
 transform: translate(0px, -7px) rotate(0deg)
}
 72% {
 transform: translate(0px, 5px) rotate(0deg)
}
 74% {
 transform: translate(0px, 5px) rotate(0deg)
}
 76% {
 transform: translate(0px, -6px) rotate(0deg)
}
 78% {
 transform: translate(0px, 8px) rotate(0deg)
}
 80% {
 transform: translate(0px, 2px) rotate(0deg)
}
 82% {
 transform: translate(0px, -8px) rotate(0deg)
}
 84% {
 transform: translate(0px, -6px) rotate(0deg)
}
 86% {
 transform: translate(0px, 5px) rotate(0deg)
}
 88% {
 transform: translate(0px, -9px) rotate(0deg)
}
 90% {
 transform: translate(0px, 1px) rotate(0deg)
}
 92% {
 transform: translate(0px, -9px) rotate(0deg)
}
 94% {
 transform: translate(0px, -8px) rotate(0deg)
}
 96% {
 transform: translate(0px, -3px) rotate(0deg)
}
 98% {
 transform: translate(0px, 1px) rotate(0deg)
}
}
@-webkit-keyframes shake-rotate {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
}
 4% {
 -webkit-transform: translate(0px, 0px) rotate(1.5deg)
}
 6% {
 -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
}
 8% {
 -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
}
 10% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 12% {
 -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
}
 14% {
 -webkit-transform: translate(0px, 0px) rotate(-4.5deg)
}
 16% {
 -webkit-transform: translate(0px, 0px) rotate(0.5deg)
}
 18% {
 -webkit-transform: translate(0px, 0px) rotate(3.5deg)
}
 20% {
 -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
}
 22% {
 -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
}
 24% {
 -webkit-transform: translate(0px, 0px) rotate(3.5deg)
}
 26% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 28% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 30% {
 -webkit-transform: translate(0px, 0px) rotate(5.5deg)
}
 32% {
 -webkit-transform: translate(0px, 0px) rotate(3.5deg)
}
 34% {
 -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
}
 36% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 38% {
 -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
}
 40% {
 -webkit-transform: translate(0px, 0px) rotate(4.5deg)
}
 42% {
 -webkit-transform: translate(0px, 0px) rotate(6.5deg)
}
 44% {
 -webkit-transform: translate(0px, 0px) rotate(0.5deg)
}
 46% {
 -webkit-transform: translate(0px, 0px) rotate(4.5deg)
}
 48% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 50% {
 -webkit-transform: translate(0px, 0px) rotate(0.5deg)
}
 52% {
 -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
}
 54% {
 -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
}
 56% {
 -webkit-transform: translate(0px, 0px) rotate(0.5deg)
}
 58% {
 -webkit-transform: translate(0px, 0px) rotate(6.5deg)
}
 60% {
 -webkit-transform: translate(0px, 0px) rotate(-3.5deg)
}
 62% {
 -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
}
 64% {
 -webkit-transform: translate(0px, 0px) rotate(1.5deg)
}
 66% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 68% {
 -webkit-transform: translate(0px, 0px) rotate(2.5deg)
}
 70% {
 -webkit-transform: translate(0px, 0px) rotate(-4.5deg)
}
 72% {
 -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
}
 74% {
 -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
}
 76% {
 -webkit-transform: translate(0px, 0px) rotate(3.5deg)
}
 78% {
 -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
}
 80% {
 -webkit-transform: translate(0px, 0px) rotate(1.5deg)
}
 82% {
 -webkit-transform: translate(0px, 0px) rotate(4.5deg)
}
 84% {
 -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
}
 86% {
 -webkit-transform: translate(0px, 0px) rotate(-2.5deg)
}
 88% {
 -webkit-transform: translate(0px, 0px) rotate(-3.5deg)
}
 90% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 92% {
 -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
}
 94% {
 -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
}
 96% {
 -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
}
 98% {
 -webkit-transform: translate(0px, 0px) rotate(6.5deg)
}
}
@-ms-keyframes shake-rotate {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 -ms-transform: translate(0px, 0px) rotate(0.5deg)
}
 4% {
 -ms-transform: translate(0px, 0px) rotate(5.5deg)
}
 6% {
 -ms-transform: translate(0px, 0px) rotate(-3.5deg)
}
 8% {
 -ms-transform: translate(0px, 0px) rotate(-2.5deg)
}
 10% {
 -ms-transform: translate(0px, 0px) rotate(-6.5deg)
}
 12% {
 -ms-transform: translate(0px, 0px) rotate(6.5deg)
}
 14% {
 -ms-transform: translate(0px, 0px) rotate(5.5deg)
}
 16% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 18% {
 -ms-transform: translate(0px, 0px) rotate(-6.5deg)
}
 20% {
 -ms-transform: translate(0px, 0px) rotate(6.5deg)
}
 22% {
 -ms-transform: translate(0px, 0px) rotate(3.5deg)
}
 24% {
 -ms-transform: translate(0px, 0px) rotate(-4.5deg)
}
 26% {
 -ms-transform: translate(0px, 0px) rotate(4.5deg)
}
 28% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 30% {
 -ms-transform: translate(0px, 0px) rotate(-5.5deg)
}
 32% {
 -ms-transform: translate(0px, 0px) rotate(-6.5deg)
}
 34% {
 -ms-transform: translate(0px, 0px) rotate(1.5deg)
}
 36% {
 -ms-transform: translate(0px, 0px) rotate(-3.5deg)
}
 38% {
 -ms-transform: translate(0px, 0px) rotate(0.5deg)
}
 40% {
 -ms-transform: translate(0px, 0px) rotate(-3.5deg)
}
 42% {
 -ms-transform: translate(0px, 0px) rotate(-5.5deg)
}
 44% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 46% {
 -ms-transform: translate(0px, 0px) rotate(-7.5deg)
}
 48% {
 -ms-transform: translate(0px, 0px) rotate(1.5deg)
}
 50% {
 -ms-transform: translate(0px, 0px) rotate(0.5deg)
}
 52% {
 -ms-transform: translate(0px, 0px) rotate(-4.5deg)
}
 54% {
 -ms-transform: translate(0px, 0px) rotate(0.5deg)
}
 56% {
 -ms-transform: translate(0px, 0px) rotate(-4.5deg)
}
 58% {
 -ms-transform: translate(0px, 0px) rotate(2.5deg)
}
 60% {
 -ms-transform: translate(0px, 0px) rotate(-2.5deg)
}
 62% {
 -ms-transform: translate(0px, 0px) rotate(4.5deg)
}
 64% {
 -ms-transform: translate(0px, 0px) rotate(-1.5deg)
}
 66% {
 -ms-transform: translate(0px, 0px) rotate(-5.5deg)
}
 68% {
 -ms-transform: translate(0px, 0px) rotate(0.5deg)
}
 70% {
 -ms-transform: translate(0px, 0px) rotate(-3.5deg)
}
 72% {
 -ms-transform: translate(0px, 0px) rotate(-2.5deg)
}
 74% {
 -ms-transform: translate(0px, 0px) rotate(-1.5deg)
}
 76% {
 -ms-transform: translate(0px, 0px) rotate(-1.5deg)
}
 78% {
 -ms-transform: translate(0px, 0px) rotate(6.5deg)
}
 80% {
 -ms-transform: translate(0px, 0px) rotate(3.5deg)
}
 82% {
 -ms-transform: translate(0px, 0px) rotate(1.5deg)
}
 84% {
 -ms-transform: translate(0px, 0px) rotate(-0.5deg)
}
 86% {
 -ms-transform: translate(0px, 0px) rotate(2.5deg)
}
 88% {
 -ms-transform: translate(0px, 0px) rotate(-6.5deg)
}
 90% {
 -ms-transform: translate(0px, 0px) rotate(2.5deg)
}
 92% {
 -ms-transform: translate(0px, 0px) rotate(6.5deg)
}
 94% {
 -ms-transform: translate(0px, 0px) rotate(-7.5deg)
}
 96% {
 -ms-transform: translate(0px, 0px) rotate(6.5deg)
}
 98% {
 -ms-transform: translate(0px, 0px) rotate(-4.5deg)
}
}
@keyframes shake-rotate {
 0% {
 transform: translate(0px, 0px) rotate(0deg)
}
 2% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 4% {
 transform: translate(0px, 0px) rotate(-4.5deg)
}
 6% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 8% {
 transform: translate(0px, 0px) rotate(4.5deg)
}
 10% {
 transform: translate(0px, 0px) rotate(-5.5deg)
}
 12% {
 transform: translate(0px, 0px) rotate(-3.5deg)
}
 14% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 16% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 18% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 20% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 22% {
 transform: translate(0px, 0px) rotate(6.5deg)
}
 24% {
 transform: translate(0px, 0px) rotate(0.5deg)
}
 26% {
 transform: translate(0px, 0px) rotate(-5.5deg)
}
 28% {
 transform: translate(0px, 0px) rotate(-4.5deg)
}
 30% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 32% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 34% {
 transform: translate(0px, 0px) rotate(0.5deg)
}
 36% {
 transform: translate(0px, 0px) rotate(6.5deg)
}
 38% {
 transform: translate(0px, 0px) rotate(-6.5deg)
}
 40% {
 transform: translate(0px, 0px) rotate(3.5deg)
}
 42% {
 transform: translate(0px, 0px) rotate(-4.5deg)
}
 44% {
 transform: translate(0px, 0px) rotate(5.5deg)
}
 46% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 48% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 50% {
 transform: translate(0px, 0px) rotate(5.5deg)
}
 52% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 54% {
 transform: translate(0px, 0px) rotate(5.5deg)
}
 56% {
 transform: translate(0px, 0px) rotate(-7.5deg)
}
 58% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 60% {
 transform: translate(0px, 0px) rotate(6.5deg)
}
 62% {
 transform: translate(0px, 0px) rotate(1.5deg)
}
 64% {
 transform: translate(0px, 0px) rotate(-7.5deg)
}
 66% {
 transform: translate(0px, 0px) rotate(-2.5deg)
}
 68% {
 transform: translate(0px, 0px) rotate(3.5deg)
}
 70% {
 transform: translate(0px, 0px) rotate(-4.5deg)
}
 72% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 74% {
 transform: translate(0px, 0px) rotate(2.5deg)
}
 76% {
 transform: translate(0px, 0px) rotate(-2.5deg)
}
 78% {
 transform: translate(0px, 0px) rotate(-0.5deg)
}
 80% {
 transform: translate(0px, 0px) rotate(-3.5deg)
}
 82% {
 transform: translate(0px, 0px) rotate(5.5deg)
}
 84% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 86% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 88% {
 transform: translate(0px, 0px) rotate(4.5deg)
}
 90% {
 transform: translate(0px, 0px) rotate(5.5deg)
}
 92% {
 transform: translate(0px, 0px) rotate(4.5deg)
}
 94% {
 transform: translate(0px, 0px) rotate(-1.5deg)
}
 96% {
 transform: translate(0px, 0px) rotate(3.5deg)
}
 98% {
 transform: translate(0px, 0px) rotate(-7.5deg)
}
}
@-webkit-keyframes shake-opacity {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg);
 opacity: 0.7
}
 10% {
 -webkit-transform: translate(-4px, 1px) rotate(-1.5deg);
 opacity: 0.1
}
 20% {
 -webkit-transform: translate(-4px, -4px) rotate(-2.5deg);
 opacity: 0.4
}
 30% {
 -webkit-transform: translate(-3px, -5px) rotate(-1.5deg);
 opacity: 0
}
 40% {
 -webkit-transform: translate(0px, 0px) rotate(0.5deg);
 opacity: 0.6
}
 50% {
 -webkit-transform: translate(0px, 0px) rotate(-2.5deg);
 opacity: 0.8
}
 60% {
 -webkit-transform: translate(-5px, -2px) rotate(1.5deg);
 opacity: 0.4
}
 70% {
 -webkit-transform: translate(-1px, 3px) rotate(-0.5deg);
 opacity: 0.1
}
 80% {
 -webkit-transform: translate(-2px, -2px) rotate(1.5deg);
 opacity: 0.2
}
 90% {
 -webkit-transform: translate(-3px, -3px) rotate(1.5deg);
 opacity: 0.3
}
}
@-ms-keyframes shake-opacity {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg);
 opacity: 0.9
}
 10% {
 -ms-transform: translate(0px, -4px) rotate(-1.5deg);
 opacity: 0.9
}
 20% {
 -ms-transform: translate(-2px, 0px) rotate(0.5deg);
 opacity: 0
}
 30% {
 -ms-transform: translate(-1px, 1px) rotate(-2.5deg);
 opacity: 0.8
}
 40% {
 -ms-transform: translate(-2px, 4px) rotate(-1.5deg);
 opacity: 0.9
}
 50% {
 -ms-transform: translate(-4px, 2px) rotate(-2.5deg);
 opacity: 0.1
}
 60% {
 -ms-transform: translate(3px, 0px) rotate(0.5deg);
 opacity: 0
}
 70% {
 -ms-transform: translate(-4px, -5px) rotate(-0.5deg);
 opacity: 0
}
 80% {
 -ms-transform: translate(4px, -1px) rotate(1.5deg);
 opacity: 0.7
}
 90% {
 -ms-transform: translate(4px, 0px) rotate(1.5deg);
 opacity: 0.9
}
}
@keyframes shake-opacity {
 0% {
 transform: translate(0px, 0px) rotate(0deg);
 opacity: 0.6
}
 10% {
 transform: translate(-2px, -1px) rotate(-0.5deg);
 opacity: 0.5
}
 20% {
 transform: translate(-4px, 4px) rotate(1.5deg);
 opacity: 0.4
}
 30% {
 transform: translate(-4px, -1px) rotate(-1.5deg);
 opacity: 0.8
}
 40% {
 transform: translate(-2px, -1px) rotate(-2.5deg);
 opacity: 0.3
}
 50% {
 transform: translate(-4px, 1px) rotate(-2.5deg);
 opacity: 0.5
}
 60% {
 transform: translate(-2px, 4px) rotate(0.5deg);
 opacity: 0.1
}
 70% {
 transform: translate(-3px, 1px) rotate(-0.5deg);
 opacity: 0.4
}
 80% {
 transform: translate(0px, 0px) rotate(-0.5deg);
 opacity: 0.5
}
 90% {
 transform: translate(2px, -1px) rotate(-2.5deg);
 opacity: 0.8
}
}
@-webkit-keyframes shake-crazy {
 0% {
 -webkit-transform: translate(0px, 0px) rotate(0deg);
 opacity: 0.6
}
 10% {
 -webkit-transform: translate(14px, 19px) rotate(-1deg);
 opacity: 0.8
}
 20% {
 -webkit-transform: translate(14px, 11px) rotate(5deg);
 opacity: 0.7
}
 30% {
 -webkit-transform: translate(9px, -6px) rotate(-9deg);
 opacity: 0.9
}
 40% {
 -webkit-transform: translate(0px, -19px) rotate(-6deg);
 opacity: 0.6
}
 50% {
 -webkit-transform: translate(16px, 19px) rotate(9deg);
 opacity: 0.7
}
 60% {
 -webkit-transform: translate(-11px, -10px) rotate(4deg);
 opacity: 0.4
}
 70% {
 -webkit-transform: translate(-1px, 13px) rotate(-9deg);
 opacity: 0.2
}
 80% {
 -webkit-transform: translate(-9px, -16px) rotate(0deg);
 opacity: 0.1
}
 90% {
 -webkit-transform: translate(3px, 2px) rotate(-2deg);
 opacity: 0.7
}
}
@-ms-keyframes shake-crazy {
 0% {
 -ms-transform: translate(0px, 0px) rotate(0deg);
 opacity: 0.8
}
 10% {
 -ms-transform: translate(18px, -4px) rotate(9deg);
 opacity: 0.2
}
 20% {
 -ms-transform: translate(6px, 1px) rotate(8deg);
 opacity: 0.8
}
 30% {
 -ms-transform: translate(-4px, 9px) rotate(8deg);
 opacity: 0.2
}
 40% {
 -ms-transform: translate(-13px, 1px) rotate(7deg);
 opacity: 0.5
}
 50% {
 -ms-transform: translate(-19px, 16px) rotate(-5deg);
 opacity: 0.3
}
 60% {
 -ms-transform: translate(9px, 16px) rotate(7deg);
 opacity: 0.3
}
 70% {
 -ms-transform: translate(-8px, -6px) rotate(-6deg);
 opacity: 0.8
}
 80% {
 -ms-transform: translate(12px, 14px) rotate(-4deg);
 opacity: 0.2
}
 90% {
 -ms-transform: translate(-12px, 12px) rotate(-8deg);
 opacity: 0.2
}
}
@keyframes shake-crazy {
 0% {
 transform: translate(0px, 0px) rotate(0deg);
 opacity: 0.4
}
 10% {
 transform: translate(3px, 10px) rotate(-1deg);
 opacity: 0.8
}
 20% {
 transform: translate(5px, 14px) rotate(-3deg);
 opacity: 0.5
}
 30% {
 transform: translate(14px, 3px) rotate(4deg);
 opacity: 0.6
}
 40% {
 transform: translate(-17px, 0px) rotate(9deg);
 opacity: 0.7
}
 50% {
 transform: translate(1px, 17px) rotate(-4deg);
 opacity: 0.7
}
 60% {
 transform: translate(9px, -4px) rotate(-10deg);
 opacity: 0.2
}
 70% {
 transform: translate(13px, 7px) rotate(7deg);
 opacity: 0.4
}
 80% {
 transform: translate(10px, 12px) rotate(9deg);
 opacity: 0.1
}
 90% {
 transform: translate(0px, 3px) rotate(5deg);
 opacity: 0.6
}
}

www.lanrenzhijia.com */




wKiom1YzJMPSP5zjAAGfZLm3Ar4457.jpg


交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526


你可能感兴趣的:(CSS3悬停抖动)

  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • metaRTC/webRTC QOS 方案与实践 metaRTC metaRTC解决方案webrtcqos
    概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术，网络通信质量需要解决下面两个问题：网络问题：UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题：发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础，丢包恢复解决丢包问题，抗乱序抖动解决网络乱序抖动问题，流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest
  • 使用FPGA接收MIPI CSI RX信号并进行去抖动、RGB转YUV处理：FX3014 USB3.0 UVC传输与帧率控制源代码，FPGA实现MIPI CSI RX接收，去Debayer， RGB转 kVfINoSzdrt fpga开发程序人生
    fpgamipicsirx接收去debayer,rgb转yuv,fx3014usb3.0uvc传输与帧率控制源代码，具体架构看图，除dphy物理层外，mipi均为源码sensorimx219mipi源码mipi4lanecsirxraw10fpgamachXO3lf-690usb3.0fx301432bityuvdatawithframesync测试模式3280*246415fps1920*108
  • 二胎（二） 梦中雅致
    今天宝宝三十周了，还有十周你就要出来了，也许会提前，妈妈和家人都很期待。到了孕晚期，睡觉是个问题，左睡右睡都不对，自己睡的不舒服，自己舒服了，宝宝不舒服，睡着了怕把宝宝压着了，一晚上还要起来上厕所两次，感觉一晚上就是半梦半醒中。每天早上起来的第一件事就是感觉宝宝的胎动，如果没动心里就发慌。最近宝宝的胎动有些跟大宝不一样，偶尔会抖动一下，像手机震动一下，不知道咋回事？在网上查了一下，好多有这种情况，
  • 飘雪 朱曦侦探事务所
    我抖动着黑色大衣，拍落附在上面的白雪，而思维沉浸在《雪の华》的音乐中，沿着大街，走在这寒冷的深夜。偶尔飞驰过的汽车带起了很多风雪，使我大衣乱飘，也吹进我的眼睛，朦胧了前面的路。两边的路灯泛出橙黄色的光，把附近的雪染上了颜色，仅剩几缕可怜的红光落到了我的身上，眼前的一片白色加重了我的步伐。大雪随风卷起，我的眼神凝望着风雪交加的深处，一个比雪色白、雪点子大的影子正向我靠近。我怀疑是自己被雪拍打的眼睛错
  • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
    在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • css3溢出隐藏的方法 DDOS防御 网络技术css3前端css
    CSS3提供了几种方法来处理元素内容的溢出问题，以下是一些常见的方法：1.**使用`overflow`属性**：-`overflow:hidden;`：隐藏溢出的内容。-`overflow:scroll;`：如果内容溢出，将显示滚动条。-`overflow:auto;`：如果内容溢出，将显示滚动条，但滚动条只在需要时显示。2.**使用`text-overflow`和`white-space`属性*
  • CSS 元素超出部分滚动, 并隐藏滚动条（2种方法） 就像风1样 cssCSS样式专栏css溢出滚动隐藏滚动条
    方法一,利用css3的新特性-webkit-scrollbar,但是这种方式不兼容火狐和IE超出部分隐藏滚动条#box{width:500px;height:300px;overflow-x:hidden;overflow-y:scroll;line-height:30px;text-align:center;}#box::-webkit-scrollbar{display:none;}你好你好你
  • 互加之歌 喜乐之泉
    何为芳华？最美的生活方式，不是躺在床上睡到自然醒；也不是坐在家里无所事事；更不是走在街上随意购物；而是，和一群志同道合的人，一起奔跑在理想的路上，回头有一路的故事，低头有坚定的脚步，抬头有清晰的远方。汇聚爱，传递光，创造美。坚持就会改变，相信更加美好的未来，就在明天！成长是破茧为蝶的过程。挣扎着褪掉所有的青涩和丑陋，在阳光下抖动轻盈美丽的翅膀，闪闪的，微微的，幸福的颤抖。创造才有奇迹。缘，因有你—
  • 2019年面试遇到的笔试题 程序猿阿峰
    前端面试，肯定是少不了笔试题，果然，今天去面试就遇到的笔试题，慌了一批。回来赶紧整理了一下一、css3的常用的新特性？flex布局和传统布局有什么区别？css3的新特性那就多啦，简单的列举了几个：过渡transition:CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)动画animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认
  • web前端达到什么水平，才能找到工作？ cj瑾瑜 前端htmljavascriptcsscss3
    一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
  • 荒诞联想｜金手指 北旭晟
    我叫张大宝，是个普通的屌丝。这天是个风和日丽、天高云淡的日子，城里的人都在享受这样和平的时光。突然半空响起了刺耳的警报声，人们惊恐的看向天空，不知道发生了什么事情，就见数十架幽浮突现城市上空盘旋。人们四散逃窜，惊呼“外星人攻打地球了！”我当时木有那么慌张，因为我早已经不知慌张为何物，只是呆若木鸡的傻杵在那儿。终于一架幽浮悬停在我的头顶，在我面前突降下一个高大威猛的外星人来。他对我说道：“你就是英俊
  • 制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格 Passion不晚 前端htmlcss3前端
    –你是否觉得自己的网站应该看起来更炫酷？今天我将教你如何使用HTML和CSS3制作一个拥有炫酷动画和现代设计风格的个人网页，让它在任何设备上看起来都无敌酷炫！哈哈哈哈哈哈哈哈,我感觉自己有点中二哈哈哈哈~目录炫酷设计理念构建HTML结构CSS3炫酷美化炫酷效果预览1.炫酷设计理念在炫酷网页中，我们将使用：全屏背景渐变：让页面背景充满动感的色彩变化。文字动画：为标题和内容添加动态效果，让它们“飞”入
  • 鹦鹉阿森（08） 空山柏语
    阿森凝望着大海，就在几个月前，它在大海的上方练习飞翔时，在它为突破二百六十米高度而高兴的往海岸边滑翔，落到二百三十米高度的时候，它回头看了一眼大海，在一朵白云的尾巴上，一条黑色的丝带吸引了它的眼球，它强忍着肩头的酸痛，悬停在了空中，仔细的辨识着那条黑色的东西，待云朵全部移开之后，那黑色的东西就像是天海交接的地方被撕裂的一道口子，但阿森马上明白，也许那就是阿布说的小岛。阿森回到岸边，心里十分激动，它
  • CSS3新特性 FL1623863121 css3前端css
    CSS3新特性CSS3是最新的CSS标准，旨在扩展CSS2.1。圆角通过border-radius属性可以给任何元素制作圆角。border-radius:所有四个边角border-*-*-radius属性的缩写。border-top-left-radius:定义了左上角的弧度。border-top-right-radius:定义了右上角的弧度。border-bottom-right-radius:
  • 479.迪斯尼公主动漫主题网页 大学生期末大作业 Web前端网页制作 html+css+js 仙女网页制作 Web网页设计实例动漫前端课程设计html
    目录一、网页概述二、网页文件三、网页效果四、代码展示1.html2.CSS3.JS五、总结1.简洁实用2.使用方便3.整体性好4.形象突出5.交互式强六、更多推荐欢迎光临仙女的网页世界！这里有各行各业的Web前端网页制作的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！说起Web前端
  • [学习笔记]《CSAPP》深入理解计算机系统 - Chapter 6 存储器层次结构 Artintel 学习学习笔记ccsapp
    总结一些第六章的一些关键信息Chapter6存储器层次结构DMA局部性抖动Chapter6存储器层次结构随机访问存储器(Random-AccessMemory,RAM)分为两类:静态的和动态的。静态(SRAM)比动态更快，更贵动态(DRAM)数据流通过称为总线(bus)的共享电子电路在处理器和DRAM主存来来回回。每次CPU和主存之间的数据传送都是通过一系列的步骤来完成的，这些步骤称为总线事务(b
  • html animation 属性,css3学习--css3动画详解一(animation属性） 蜗牛老湿 htmlanimation属性
    ***介绍的属性并不完全，写的都是我认为容易混淆的难点属性，所以属性会在最后综合案例展示~Keyframes介绍：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。@keyframeschangecolor{0%{background:red;}100%{b
  • css3动画延迟运行 animation-delay 努力，加油，奋斗 笔记
    1.语法animation:namedurationtiming-functiondelayiteration-countdirectionfill-modeplay-state;2.说明name指定要绑定到选择器的关键帧的名称duration动画指定需要多少秒或毫秒完成timing-function设置动画将如何完成一个周期delay设置动画在启动前的延迟间隔。iteration-count定义
  • 微信小程序简易弹幕组件(uniapp) Vivqst 微信小程序uni-appjavascript
    最终效果图如下：1.弹幕从弹幕区域外的右边滚动到左边，那么每条弹幕的实际滚动路径长度为当前弹幕的实际宽度+整个弹幕区域的宽度组件代码如下：{{item.text}}{{currentBullet}}2.本例中弹幕区域的宽度为当前屏幕的宽度。弹幕的滚动效果使用css3的animation实现，使用translateX来实现水平位移的变化。弹幕使用绝对定位初始时在屏幕的最左边（left:0），动画开始
  • 后座 喵咪薄荷糖喵
    狭窄的后座位载着的好友寒风中冻得抖动的腿等来的公交车电瓶车离开的侧影原来友谊细微处见到的伟大……
  • Debug-025-鼠标悬浮hover在父元素上修改子元素样式 码农小白-RMS css前端
    效果展示如下：鼠标移入父元素之后子元素修改样式功能：实现一个鼠标hover悬停在父元素上，然后修改子元素的样式的效果：//----------------html11//-----------------CSS.QQQQ{width:100px;height:100px;background:aquamarine;.qqqq{width:30px;height:30px;background:rg
  • Html、Css3动画效果 蔚一 htmlcss3前端
    文章目录第九章动画9.1transform动画9.2transition过渡动画9.3定义动画第九章动画9.1transform动画transform2D变形translate()：平移函数，基于X、Y坐标重新定位元素的位置scale()：缩放函数，可以使任意元素对象尺寸发生变化rotate()：旋转函数，取值是一个度数值skew()：倾斜函数，取值是一个度数值div{transform:tran
  • 用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码 天眼查 用html写出生日蛋糕
    .birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px
  • 无人机电子调速器详解!!! 云卓SKYDROID 无人机云卓科技高科技安全
    电子调速器是无人机动力系统中的关键组件，主要负责将电池提供的直流电转换为交流电，并精确控制电机的转速，从而实现对无人机飞行状态的精确控制。以下是对无人机电子调速器的详细解析：一、基本功能与原理功能：直流到交流的转换：将电池提供的直流电转换为电机所需的交流电。转速控制：根据飞行控制器的指令，精确调节电机的转速，实现无人机的加速、减速、悬停等飞行动作。保护功能：具备过流保护、过热保护等安全功能，防止电
  • 记录-小程序720°VR（跳转H5页面实现） 久违的小技巧 小程序小程序vrjavascript
    全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他