CSS3 悬挂动画

Question

有没有办法使用margin-top实现元素上下弹起的悬挂动画？模仿 flex 的东西。

基本上，我希望第一帧为 margin-top:0px，第二帧为 margin-top:15px; 并且应该是无限的。

Answer 1

网上有很多例子。

从这里查看 tutorial 。它是用纯 CSS 完成的。

---

我刚刚创建了一个简单的演示。一探究竟。该浏览器可在 webkit 和 mozilla 浏览器上运行。

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

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

.bounce{
    display:block;
    height:20px;
    width:20px;
    background:#ff0000;
    border-radius:20px;
    margin:50px;
    -webkit-animation-name: bounce;
        -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: bounce;
        -moz-animation-duration:.3s;
        -moz-animation-direction:alternate;
        -moz-animation-timing-function:linear;
        -moz-animation-delay:0s;
        -moz-animation-iteration-count:infinite;
}

Check out this demo

希望你喜欢。