swing-动画
HTML代码为:
<div class="page p3"> <div class="item-01 swing"><img src="images/p1_04.png"></div> <div class="item-02"><img src="images/p1_04.png"></div> </div>
CSS代码为:
.item-01{ width: 600px; position: absolute; left: 20px; top: 50px;-webkit-animation: swing 1s ease 0s infinite both;} .item-02{ width: 400px; position: absolute; left: 50%; top: 200px; margin-left: -200px;-webkit-animation: swing 2s ease 0s 4 both;} @-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)} 40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)} 60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)} 80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)} 100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)} } @keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)} 40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)} 60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)} 80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)} 100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)} } .swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}
本地效果为:app/html5_animation/swing.html