Cómo crear animation div rebotando

Estoy tratando de volver a crear la animation de flecha de rebote como en: http://www.codecomputerlove.com/ pero no está yendo bien …

Lo más cercano que tengo tratando de usar las animaciones integradas en Layerslider está disponible aquí: dev.themarketcreative dot com

He decidido que tratar de resolver esto con Layerslider es muy largo, ¿alguien sabe cómo hacer esto?

Lo más que descubrí es esto: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149 pero lo necesito hacer esta animation onload y en un bucle continuo.

Gracias

5 Solutions collect form web for “Cómo crear animation div rebotando”

Modo CSS puro para hacer este rebote

Hazlo así.

CSS

.bounce { position:fixed; left:50%; bottom:0; margin-top:-25px; margin-left:-25px; height:50px; width:50px; background:networking; -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> 
 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); } } 
 <body> <div class="arrow bounce"> </div> </body> 

Use la siguiente

 <html lang="en"> <head> <style> p { background-color:#bca; width:200px; border:1px solid green; } div{ width:100px; height:100px; background:networking; } </style> <script src="http://www.tutorialspoint.com/jquery/jquery-1.3.2.min.js"></script> <script src="http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js"></script> <title>Birman Cats</title> </head> <body> <p>Click the button</p> <button id="button"> Bounce </button> <div class="target"> </div> <script> $(document).ready(function() { $(".target").effect( "bounce", {times:3}, 300 ); function bouncee(){ $(".target").effect( "bounce",{times:3}, 300 ); setTimeout(bouncee(),1000); } setTimeout(bouncee(),1000); }); </script> </body> </html> 

Con el mismo código que proporcionó, simplemente reemplace el javascript con este código js.

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

Puedes hacerlo manualmente, cuadro por cuadro usando CSS o probablemente puedas automatizarlo con SCSS con un poco de matemática e iteración.

 body{ overflow:hidden; } .ball{ width: 50px; height: 50px; margin: auto; background-color: networking; 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); } } 
 <div class="ball"></div> 
  • Alerta al llegar a la parte inferior de la página alerta cuando estoy en la parte superior
  • resalte tanto la página como la pestaña correspondiente en jquery
  • Animación para div cuando ingresa a la window horizontalmente
  • ¿Cómo agregar angularjs ui bootstrap tooltips dinámicamente al marcado existente?
  • Iterando Matriz de Objetos en javascript
  • Cómo puedo usar JQuery Datepicker con un ícono y un formatting en ASP.NET
  • cómo activar la opción de búsqueda automática de la IU de autocomplete jquery con múltiples remotos
  • ¿Cuál es la diferencia entre los datos del formulario y la carga útil de request?
  • ¿Algún ajuste final que se pueda hacer con Phonegap + JQuery Mobile?
  • ¿Obteniendo jQuery de un CDN?
  • ¿Por qué `$ (documento) === $ (documento)` devuelve falso en jQuery?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.