body{margin:0;padding:0;background-color:#333}.memo{color:#fff;font-size:18px;text-align:center;position:absolute;width:100%;left:0}.shake-icon{position:absolute;background:url(shake.png) no-repeat;background-size:cover}body.shakeing .shake-icon{-webkit-animation:wobble 1s .2s infinite ease both;-moz-animation:wobble 1s .2s infinite ease both}@-webkit-keyframes wobble{0{-webkit-transform:translateX(0)}15%{-webkit-transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0)}}@-moz-keyframes wobble{0{-moz-transform:translateX(0)}15%{-moz-transform:translateX(-25%) rotate(-5deg)}30%{-moz-transform:translateX(20%) rotate(3deg)}45%{-moz-transform:translateX(-15%) rotate(-3deg)}60%{-moz-transform:translateX(10%) rotate(2deg)}75%{-moz-transform:translateX(-5%) rotate(-1deg)}100%{-moz-transform:translateX(0)}}body.shakeing{-webkit-backface-visibility:visible;-webkit-transform-origin:center center;-webkit-animation:bgchange-keyframes 1s .2s infinite ease-out normal none}@-webkit-keyframes bgchange-keyframes{0{background:#333}25%{background:#fff}50%{background:red}75%{background:#fff}100%{background:#333}}@-moz-keyframes bgchange-keyframes{0{background:#333}25%{background:#fff}50%{background:red}75%{background:#fff}100%{background:#333}}