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