使用Css3的简单动画

Question

如何让一个HTML元素像一个圆圈一样行动，就好像它弹跳一样，就像多次移动它一样？有没有可能只有CSS3？

Answer 1

是的，你需要使用关键帧动画来做到这一点。这里有一个简单的例子：

HTML：

<div class="bounce"></div> 

CSS：

@-webkit-keyframes hop { 
     from{ 
     -webkit-transform: translate(0px,0px); 
     } 


     to { 
     -webkit-transform: translate(0px,-30px); 
     } 
     } 

@-moz-keyframes hop { 
     from{ 
     -moz-transform: translate(0px,0px); 
     } 


     to { 
     -moz-transform: translate(0px,-30px); 
     } 
     } 

.bounce{ 
    display:block; 
    height:200px; 
    width:200px; 
    background:#ff6600; 
    border-radius:300px; 
    margin-top:100px; 
-webkit-animation-name: hop; 
    -webkit-animation-duration:.3s; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-delay:0s; 
    -webkit-animation-iteration-count:infinite; 
    -moz-animation-name: hop; 
    -moz-animation-duration:.3s; 
    -moz-animation-direction:alternate; 
    -moz-animation-timing-function:linear; 
    -moz-animation-delay:0s; 
    -moz-animation-iteration-count:infinite; 
} 

并为您的观赏乐趣小提琴：http://jsfiddle.net/hpBhf/1/

Answer 2

我认为最简单的方法这是否使用animate.css，支持很多不同租用动画，如果你想快速添加动画，这是一个很好的选择，这里是由animate.css开发的简单游戏，http://www.gbin1.com/technology/democenter/20120812-animate-css/index.html