swing-css3动画大全-站长素材(zzsucai.com)

建议使用谷歌浏览器或者是使用IE10及以上版本的浏览器

swing

​x
 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>swing-站长素材(zzsucai.com)</title>
<style>
.div {
    width:300px;
    height:200px;
    margin:100px auto;
    background:url(images/zzsucai.png)
}
#animation {
-webkit-animation:swing 1s .2s ease both;
-moz-animation:swing 1s .2s ease both;
}
@-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-webkit-transform-origin:top center
}
20% {
-webkit-transform:rotate(15deg)
}
40% {
-webkit-transform:rotate(-10deg)
}
60% {
-webkit-transform:rotate(5deg)
}
80% {
-webkit-transform:rotate(-5deg)
}
100% {
-webkit-transform:rotate(0deg)
}
}
@-moz-keyframes swing {
20%, 40%, 60%, 80%, 100% {
-moz-transform-origin:top center
}
20% {
-moz-transform:rotate(15deg)
}
40% {
-moz-transform:rotate(-10deg)
}
60% {
-moz-transform:rotate(5deg)
}
80% {
-moz-transform:rotate(-5deg)
}
100% {
-moz-transform:rotate(0deg)
}
}
</style>
</head>
<body>
<div id="animation" class="div"></div>
</body>
</html>
​