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を使用していますか、多くのdiffeをサポートしていますかアニメーションを素早く追加したい場合は、非常に良い選択です。animate.cssによって開発されたシンプルなゲームです。http://www.gbin1.com/technology/democenter/20120812-animate-css/index.html