Как создать анимацию div diving

Я пытаюсь воссоздать анимацию стрелки отскока, например, на http://www.codecomputerlove.com/, но это не очень хорошо...

Самый близкий, с которым я пытаюсь использовать встроенные анимации в Layerslider, можно найти здесь: dev.themarketcreative dot com

Я решил, что попытка понять это с помощью Layerslider занимает много времени, кто-нибудь знает, как это сделать?

Самое дальнее, что я обнаружил, это: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=jquery_149, но мне нужно, чтобы он выполнял эту анимацию onload и в непрерывном цикле.

Спасибо

ОТВЕТЫ

Ответ 1

Чисто 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;}
    }
<div class="bounce"></div>

Ответ 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+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+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>

Ответ 3

Вы можете сделать это вручную, кадр за кадром, используя 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); }
}
<div class="ball"></div>

Ответ 4

Используйте следующий

<html lang="en">
<head>
 <style>
      p {
           background-color:#bca;
           width:200px; 
           border:1px solid green; 
        }
     div{ width:100px; 
            height:100px; 
            background:red;  
        }
  </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>

Ответ 5

С тем же кодом, который вы указали, просто замените javascript на этот js-код.

    $(document).ready(function() {



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

doAnimation();

   });
   </script>

Ответ 6

Вы можете использовать чистый CSS, чтобы решить это.

.image {
      margin-top: 50px;
      width: 50px;
      height: 50px;
      background-color: gold;
      border: 1px solid #999;
      animation: bounce 5s infinite alternate;
      -webkit-animation: bounce 5s infinite alternate;
    }
    @keyframes bounce {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
    @-webkit-keyframes image {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
<div class="image"></div>

Ответ 7

no
.trnas{
      margin-top: 50px;
      width: 50px;
      height: 50px;
      background-color: gold;
      border: 1px solid #999;
      animation: bounce 5s infinite alternate;
      -webkit-animation: bounce 5s infinite alternate;
    }
    @keyframes bounce {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
    @-webkit-keyframes image {
      from {
        transform: translateY(0px);
      }
      to {
        transform: translateY(-55px);
      }
    }
<div class="trnas"></div>