解密Animate.css之CSS3动画实现方式大全源码(6星级)

摇摆效果:http://www.100sucai.com/css3/3.html

<!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>


你可能感兴趣的:(源码,动画,css3)