如何创建弹跳div动画

我正在尝试重新创建弹跳箭头动画，如： http ： //www.codecomputerlove.com/但它不顺利……

我最喜欢尝试在Layerslider中使用内置动画，可以在这里找到：dev.themarketcreative dot com

我已经决定用Layerslider来解决这个问题需要很长时间，有谁知道怎么做？

我发现的最远的是： http ：//www.tutorialspoint.com/cgi-bin/practice.cgi？file = jquery_149但我需要它做这个动画onload和连续循环。

谢谢

Answer 1

PURE CSS方式做这个反弹

这样做。

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

Answer 2

 body { background: black; } .arrow { position: fixed; bottom: 0; left: 50%; margin-left:-20px; width: 40px; height: 40px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain; } .bounce { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } /* Scroll down indicator (bouncing) */ @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -o-transform: translateY(-15px); transform: translateY(-15px); } } 

Answer 3

使用以下

         
Click the button
  Bounce  
 
    

Answer 4

使用您提供的相同代码，只需使用此js代码替换javascript即可。

  $(document).ready(function() { function doAnimation() { $(".target").effect( "bounce", {times:3}, 300, doAnimation); } doAnimation(); });  

Answer 5

您可以使用CSS逐帧手动完成，也可以使用SCSS通过一些数学和迭代来自动化它。

 body{ overflow:hidden; } .ball{ width: 50px; height: 50px; margin: auto; background-color: red; border-radius: 50%; position: absolute; top: 10px; left: 0; right: 0; animation: bounce 1s infinite; } @keyframes bounce { 0% { transform: translateY(6px); } 5% { transform: translateY(8px); } 10% { transform: translateY(12px); } 15% { transform: translateY(20px); } 20% { transform: translateY(38px); } 25% { transform: translateY(72px); } 30% { transform: translateY(100px); } 35% { transform: translateY(152px); } 40% { transform: translateY(154px) scale(1.1, .9); } 50% { transform: translateY(176px) scale(1.4, .6); } 55% { transform: translateY(162px) scale(1.2, .8); } 60% { transform: translateY(138px) scale(1.05, .95); } 65% { transform: translateY(110px); } 70% { transform: translateY(72px); } 75% { transform: translateY(38px); } 80% { transform: translateY(20px); } 85% { transform: translateY(12px); } 90% { transform: translateY(8px); } 95% { transform: translateY(5px); } 100% { transform: translateY(5px); } }