<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>摇摆</title>
<style>
.div {
width:300px;
height:200px;
margin:100px auto;
background:url(http://www.100sucai.com/img/demo/1373.png)
}
#animation {
-webkit-animation:shake 1s .2s ease both;
-moz-animation:shake 1s .2s ease both;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform:translateX(10px);
}
}
@-moz-keyframes shake {
0%, 100% {
-moz-transform:translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-moz-transform:translateX(-10px);
}
20%, 40%, 60%, 80% {
-moz-transform:translateX(10px);
}
}
</style>
</head>
<body>
<div id="animation" class="div"></div>
</body>
</html>
