/* -webkit-animation-name: shaky-slow; // webkit内核 -ms-animation-name: shaky-slow; // ie内核 animation-name: shaky-slow; // 原生 animation-duration: 4s; // 动画执行时间 animation-delay: 0s; // 动画等待时间 animation-iteration-count: infinite; // 动画执行次数,infinite为一直执行 animation-timing-function: ease-in-out; // 动画执行速度 animation-delay: 0s; // 动画延时时间 animation-play-state: running; // 动画执行状态,一般没必要parse */ .shaky { display: inline-block; padding: 1px; font-size: 14px; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: shaky-slow; -ms-animation-name: shaky-slow; animation-name: shaky-slow; -webkit-animation-duration: 4s; -ms-animation-duration: 4s; animation-duration: 4s; -webkit-animation-iteration-count: 1; -ms-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0s; -ms-animation-delay: 0s; animation-delay: 0s; -webkit-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } @-webkit-keyframes shaky-slow { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); } 2% { -webkit-transform: translate(-1px, 1.5px) rotate(1.5deg); } 4% { -webkit-transform: translate(1.3px, 0px) rotate(-0.5deg); } 6% { -webkit-transform: translate(1.4px, 1.4px) rotate(-2deg); } 8% { -webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg); } 10% { -webkit-transform: translate(1.4px, 0px) rotate(-2deg); } 12% { -webkit-transform: translate(-1.3px, -1px) rotate(-2deg); } 14% { -webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg); } 16% { -webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg); } 18% { -webkit-transform: translate(1.3px, -1.3px) rotate(-2deg); } 20% { -webkit-transform: translate(1px, 1px) rotate(-0.5deg); } 22% { -webkit-transform: translate(1.3px, 1.5px) rotate(-2deg); } 24% { -webkit-transform: translate(-1.4px, -1px) rotate(2deg); } 26% { -webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg); } 28% { -webkit-transform: translate(1.6px, -1.6px) rotate(-2deg); } 30% { -webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg); } 32% { -webkit-transform: translate(-1px, 0px) rotate(2deg); } 34% { -webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg); } 36% { -webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg); } 38% { -webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg); } 40% { -webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg); } 42% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg); } 44% { -webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg); } 46% { -webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg); } 48% { -webkit-transform: translate(1px, 1.6px) rotate(1.5deg); } 50% { -webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg); } 52% { -webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg); } 54% { -webkit-transform: translate(1.6px, -1px) rotate(-2deg); } 56% { -webkit-transform: translate(1.3px, -1.6px) rotate(-2deg); } 58% { -webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg); } 60% { -webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg); } 62% { -webkit-transform: translate(0px, 0px) rotate(-1.5deg); } 64% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); } 66% { -webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg); } 68% { -webkit-transform: translate(0px, -1.6px) rotate(-2deg); } 70% { -webkit-transform: translate(-1.6px, 1px) rotate(1.5deg); } 72% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg); } 74% { -webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg); } 76% { -webkit-transform: translate(1.4px, 1px) rotate(-0.5deg); } 78% { -webkit-transform: translate(-1px, 1.4px) rotate(2deg); } 80% { -webkit-transform: translate(1.4px, 1.6px) rotate(2deg); } 82% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg); } 84% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg); } 86% { -webkit-transform: translate(1px, 1.4px) rotate(-2deg); } 88% { -webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg); } 90% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); } 92% { -webkit-transform: translate(-1.6px, 1.6px) rotate(2deg); } 94% { -webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg); } 96% { -webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg); } 98% { -webkit-transform: translate(1.3px, 1px) rotate(-0.5deg); } } @keyframes shaky-slow { 0% { transform: translate(0px, 0px) rotate(0deg); } 2% { transform: translate(-1px, 1.5px) rotate(1.5deg); } 4% { transform: translate(1.3px, 0px) rotate(-0.5deg); } 6% { transform: translate(1.4px, 1.4px) rotate(-2deg); } 8% { transform: translate(-1.3px, -1px) rotate(-1.5deg); } 10% { transform: translate(1.4px, 0px) rotate(-2deg); } 12% { transform: translate(-1.3px, -1px) rotate(-2deg); } 14% { transform: translate(1.5px, 1.3px) rotate(1.5deg); } 16% { transform: translate(1.5px, -1.5px) rotate(-1.5deg); } 18% { transform: translate(1.3px, -1.3px) rotate(-2deg); } 20% { transform: translate(1px, 1px) rotate(-0.5deg); } 22% { transform: translate(1.3px, 1.5px) rotate(-2deg); } 24% { transform: translate(-1.4px, -1px) rotate(2deg); } 26% { transform: translate(1.3px, -1.3px) rotate(0.5deg); } 28% { transform: translate(1.6px, -1.6px) rotate(-1.5deg); } 30% { transform: translate(-1.3px, -1.3px) rotate(-1.5deg); } 32% { transform: translate(-1px, 0px) rotate(2deg); } 34% { transform: translate(1.3px, 1.3px) rotate(-0.5deg); } 36% { transform: translate(1.3px, 1.6px) rotate(1.5deg); } 38% { transform: translate(1.3px, -1.6px) rotate(1.5deg); } 40% { transform: translate(-1.4px, -1px) rotate(-0.5deg); } 42% { transform: translate(-1.4px, 1.3px) rotate(-0.5deg); } 44% { transform: translate(-1.6px, 1.4px) rotate(0.5deg); } 46% { transform: translate(-2.1px, -1.3px) rotate(-0.5deg); } 48% { transform: translate(1px, 1.6px) rotate(1.5deg); } 50% { transform: translate(1.6px, 1.6px) rotate(1.5deg); } 52% { transform: translate(-1.4px, 1.6px) rotate(0.5deg); } 54% { transform: translate(1.6px, -1px) rotate(-2deg); } 56% { transform: translate(1.3px, -1.6px) rotate(-2deg); } 58% { transform: translate(-1.3px, -1.6px) rotate(0.5deg); } 60% { transform: translate(1.3px, 1.6px) rotate(-0.5deg); } 62% { transform: translate(0px, 0px) rotate(-1.5deg); } 64% { transform: translate(-1.6px, -1.6px) rotate(-2deg); } 66% { transform: translate(1.6px, -1.6px) rotate(0.5deg); } 68% { transform: translate(0px, -1.6px) rotate(-2deg); } 70% { transform: translate(-1.6px, 1px) rotate(1.5deg); } 72% { transform: translate(-1.6px, 1.6px) rotate(2deg); } 74% { transform: translate(1.3px, -1.6px) rotate(-0.5deg); } 76% { transform: translate(1.4px, 1px) rotate(-0.5deg); } 78% { transform: translate(-1px, 1.4px) rotate(2deg); } 80% { transform: translate(1.4px, 1.6px) rotate(2deg); } 82% { transform: translate(-1.6px, -1.6px) rotate(-0.5deg); } 84% { transform: translate(-1.4px, 1.4px) rotate(-2deg); } 86% { transform: translate(1px, 1.4px) rotate(-2deg); } 88% { transform: translate(-1.4px, 1.4px) rotate(-1.5deg); } 90% { transform: translate(-1.6px, -1.6px) rotate(-2deg); } 92% { transform: translate(-1.4px, 1.6px) rotate(2deg); } 94% { transform: translate(-1.6px, -1.6px) rotate(-2deg); } 96% { transform: translate(-1.4px, 1.3px) rotate(-2deg); } 98% { transform: translate(1.3px, 1px) rotate(-0.5deg); } }