Question

我已经开始使用bootstrap了，我在制作一个div＆＃34; container＆＃34;弹跳。这就是我到目前为止所拥有的

＆＃13;

@keyframes bouncing {
  0% {
    top: 0px;
  }
  100% {
    top: 50px;
  }
}

#arrow {
  animation-duration: 2s;
  animation-name: bouncing;
  animation-iteration-count: infinite;
  font-size: 2em;
}

＆＃13;

<div class="container" id="arrow">
  <span class="glyphicon glyphicon-chevron-down"> </span>
  <br />
  <a href="#">Find out more</a>
</div>

＆＃13;

Answer 1

我通过animate.css抓取@keyframes。

＆＃13;

@keyframes bouncing {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bouncing {
  position: absolute;
  animation-duration: 2s;
  animation-name: bouncing;
  animation-iteration-count: infinite;
  font-size: 2em;
}

＆＃13;

<div class="container bouncing" id="arrow"> 
      <span class="glyphicon glyphicon-chevron-down"  > </span>   
      <br>
      <a href="#" >Find out more</a>
</div>

＆＃13;

JSFiddle

如何使引导容器反弹

1 个答案: