使用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