如何创建反弹格动画 | 如何创建反弹格动画

本文介绍了如何创建反弹格动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图重新创建反弹箭头动画像：但它不会好...

I'm trying to re-create the bouncing arrow animation like on: http://www.codecomputerlove.com/ but it's not going well...

我已经尝试使用内置在Layerslider动画得到的最接近，请访问：dev.themarketcreative点com

The closest I've got with trying to use the built in animations in Layerslider is available here: dev.themarketcreative dot com

我已经决定，试图弄清楚这一点与Layerslider正在长，没有人知道如何做到这一点？

I've decided that trying to figure this out with Layerslider is taking to long, does anyone know how to do this?

我发现的最远的是这样的：<一href=\"http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149\">http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149但我需要它做的onload做动画和连续循环。

The furthest I discovered is this: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149 but I need it do do this animation onload and on a continuous loop.

感谢

推荐答案

做这样的。

CSS

.bounce {
  position:fixed;
  left:50%;
  bottom:0;
  margin-top:-25px;
  margin-left:-25px;
  height:50px;
  width:50px;
  background:red;
  -webkit-animation:bounce 1s infinite;
}

@-webkit-keyframes bounce {
  0%       { bottom:5px; }
  25%, 75% { bottom:15px; }
  50%      { bottom:20px; }
  100%     {bottom:0;}
}

HTML

<div class="bounce"></div>

这篇关于如何创建反弹格动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！