.shake { width:150px; height:30px; background:yellowgreen; -webkit-animation:shake-slow 1s linear; animation:shake-slow 1s linear infinite; } @-webkit-keyframes shake-slow { 2% { -webkit-transform:translate(-4px,2px) rotate(1.5deg); transform:translate(-4px,2px) rotate(1.5deg) } 4% { -webkit-transform:translate(-8px,10px) rotate(-1.5deg); transform:translate(-8px,10px) rotate(-1.5deg) } 6% { -webkit-transform:translate(2px,-6px) rotate(-.5deg); transform:translate(2px,-6px) rotate(-.5deg) } 8% { -webkit-transform:translate(10px,10px) rotate(-1.5deg); transform:translate(10px,10px) rotate(-1.5deg) } 10% { -webkit-transform:translate(8px,4px) rotate(.5deg); transform:translate(8px,4px) rotate(.5deg) } 12% { -webkit-transform:translate(2px,6px) rotate(-.5deg); transform:translate(2px,6px) rotate(-.5deg) } 14% { -webkit-transform:translate(10px,-8px) rotate(.5deg); transform:translate(10px,-8px) rotate(.5deg) } 16% { -webkit-transform:translate(-9px,-5px) rotate(3.5deg); transform:translate(-9px,-5px) rotate(3.5deg) } 18% { -webkit-transform:translate(9px,-9px) rotate(-1.5deg); transform:translate(9px,-9px) rotate(-1.5deg) } 20% { -webkit-transform:translate(2px,1px) rotate(1.5deg); transform:translate(2px,1px) rotate(1.5deg) } 22% { -webkit-transform:translate(-4px,1px) rotate(2.5deg); transform:translate(-4px,1px) rotate(2.5deg) } 24% { -webkit-transform:translate(-7px,4px) rotate(-1.5deg); transform:translate(-7px,4px) rotate(-1.5deg) } 26% { -webkit-transform:translate(-6px,-1px) rotate(-2.5deg); transform:translate(-6px,-1px) rotate(-2.5deg) } 28% { -webkit-transform:translate(6px) rotate(-1.5deg); transform:translate(6px) rotate(-1.5deg) } 30% { -webkit-transform:translate(-6px,6px) rotate(3.5deg); transform:translate(-6px,6px) rotate(3.5deg) } 32% { -webkit-transform:translate(5px,7px) rotate(3.5deg); transform:translate(5px,7px) rotate(3.5deg) } 34% { -webkit-transform:translate(-5px,5px) rotate(3.5deg); transform:translate(-5px,5px) rotate(3.5deg) } 36% { -webkit-transform:translate(-8px,-3px) rotate(-2.5deg); transform:translate(-8px,-3px) rotate(-2.5deg) } 38% { -webkit-transform:translate(-3px,5px) rotate(-2.5deg); transform:translate(-3px,5px) rotate(-2.5deg) } 40% { -webkit-transform:translate(8px,-4px) rotate(1.5deg); transform:translate(8px,-4px) rotate(1.5deg) } 42% { -webkit-transform:translate(2px,-8px) rotate(2.5deg); transform:translate(2px,-8px) rotate(2.5deg) } 44% { -webkit-transform:translate(5px,-7px) rotate(-1.5deg); transform:translate(5px,-7px) rotate(-1.5deg) } 46% { -webkit-transform:translate(8px,-4px) rotate(1.5deg); transform:translate(8px,-4px) rotate(1.5deg) } 48% { -webkit-transform:translate(1px,-4px) rotate(.5deg); transform:translate(1px,-4px) rotate(.5deg) } 50% { -webkit-transform:translate(-7px,7px) rotate(3.5deg); transform:translate(-7px,7px) rotate(3.5deg) } 52% { -webkit-transform:translate(7px,-5px) rotate(3.5deg); transform:translate(7px,-5px) rotate(3.5deg) } 54% { -webkit-transform:translate(10px,-5px) rotate(1.5deg); transform:translate(10px,-5px) rotate(1.5deg) } 56% { -webkit-transform:translate(-1px,-8px) rotate(1.5deg); transform:translate(-1px,-8px) rotate(1.5deg) } 58% { -webkit-transform:translate(2px,-2px) rotate(-1.5deg); transform:translate(2px,-2px) rotate(-1.5deg) } 60% { -webkit-transform:translate(-8px) rotate(2.5deg); transform:translate(-8px) rotate(2.5deg) } 62% { -webkit-transform:translate(9px,-5px) rotate(-2.5deg); transform:translate(9px,-5px) rotate(-2.5deg) } 64% { -webkit-transform:translate(8px,-9px) rotate(.5deg); transform:translate(8px,-9px) rotate(.5deg) } 66% { -webkit-transform:translate(-6px,-7px) rotate(-2.5deg); transform:translate(-6px,-7px) rotate(-2.5deg) } 68% { -webkit-transform:translate(-1px,-4px) rotate(-1.5deg); transform:translate(-1px,-4px) rotate(-1.5deg) } 70% { -webkit-transform:translate(10px,-8px) rotate(-1.5deg); transform:translate(10px,-8px) rotate(-1.5deg) } 72% { -webkit-transform:translate(3px,6px) rotate(-2.5deg); transform:translate(3px,6px) rotate(-2.5deg) } 74% { -webkit-transform:translate(-1px,8px) rotate(-.5deg); transform:translate(-1px,8px) rotate(-.5deg) } 76% { -webkit-transform:translate(-3px,7px) rotate(1.5deg); transform:translate(-3px,7px) rotate(1.5deg) } 78% { -webkit-transform:translate(9px) rotate(2.5deg); transform:translate(9px) rotate(2.5deg) } 80% { -webkit-transform:translate(9px,-5px) rotate(3.5deg); transform:translate(9px,-5px) rotate(3.5deg) } 82% { -webkit-transform:translate(9px,8px) rotate(-.5deg); transform:translate(9px,8px) rotate(-.5deg) } 84% { -webkit-transform:translate(-3px,-3px) rotate(-2.5deg); transform:translate(-3px,-3px) rotate(-2.5deg) } 86% { -webkit-transform:translate(-8px,-1px) rotate(3.5deg); transform:translate(-8px,-1px) rotate(3.5deg) } 88% { -webkit-transform:translate(5px,2px) rotate(3.5deg); transform:translate(5px,2px) rotate(3.5deg) } 90% { -webkit-transform:translate(5px,9px) rotate(-.5deg); transform:translate(5px,9px) rotate(-.5deg) } 92% { -webkit-transform:translate(7px,5px) rotate(1.5deg); transform:translate(7px,5px) rotate(1.5deg) } 94% { -webkit-transform:translate(8px,8px) rotate(-.5deg); transform:translate(8px,8px) rotate(-.5deg) } 96% { -webkit-transform:translate(2px,10px) rotate(-2.5deg); transform:translate(2px,10px) rotate(-2.5deg) } 98% { -webkit-transform:translate(-5px,10px) rotate(-2.5deg); transform:translate(-5px,10px) rotate(-2.5deg) } 0%,to { -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0) } }
利用css3的keyframes制作抖动效果