html - 使用 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;
}

还有一个 fiddle 供您欣赏:http://jsfiddle.net/hpBhf/1/