Эффект отскока с использованием анимации ключевого кадра css3

Question

Я пытаюсь исправить эффект, используя css3 анимация ключевого кадра. here is fiddle link: click

Фон коробки меняется, но мое требование - дать эффект отскока на фоновое изображение, а не цвет фона.

Что именно мне нужно: прыгающий (прыжки) плюшевый на батуте с двумя состояниями:
(1. с оружием, 2. с оружием вниз) во время прыжков.

Любые идеи, как его достичь? Спасибо!

Answer 1

Я получил решение для этого:

.margin{ 
 
    margin-top:200px; 
 
} 
 
} 
 
/* keyframes definition for WebKit browsers */ 
 

 
@-webkit-keyframes travel { 
 
    from { right: 10px;  } 
 
    to { right: 10px; } 
 
} 
 

 
@-webkit-keyframes bounce { 
 
    from, to { 
 
    bottom: 40px; 
 
    -webkit-animation-timing-function: ease-out; 
 
    } 
 
    50% { 
 
    bottom: 140px; 
 
    -webkit-animation-timing-function: ease-in; 
 
    } 
 
} 
 
@-webkit-keyframes bounce1 { 
 
    from, to { 
 
    bottom: 40px; 
 
    -webkit-animation-timing-function: ease-out; 
 
    } 
 
    50% { 
 
    bottom: 140px; 
 
\t z-index:9; 
 
    -webkit-animation-timing-function: ease-in; 
 
    } 
 
} 
 

 

 
/* keyframes definition for other browsers */ 
 

 
@keyframes travel { 
 
    from { right: 10px;  } 
 
    to { right: 10px; } 
 
} 
 

 
@keyframes bounce { 
 
    from, to { 
 
    bottom: 45px; 
 
    animation-timing-function: ease-out; 
 
    } 
 
    50% { 
 
    bottom: 140px; 
 
    animation-timing-function: ease-in; 
 
\t 
 
    } 
 
} 
 
@keyframes bounce1 { 
 
    from, to { 
 
    bottom: 45px; 
 
    animation-timing-function: ease-out; 
 
    } 
 
    50% { 
 
    bottom: 140px; 
 
\t z-index:9; 
 
    animation-timing-function: ease-in; 
 
\t 
 
    } 
 
} 
 

 
/* styles for the stage and animated elements */ 
 

 
#traveler { 
 
    position: absolute; 
 
    width: 75px; 
 
    height: 100px; 
 
    -webkit-animation-name: travel; 
 
    -webkit-animation-timing-function: linear; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-direction: alternate; 
 
    -webkit-animation-duration:2.8s; 
 

 
    animation-name: travel; 
 
    animation-timing-function: linear; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-duration: 2.8s; 
 
} 
 

 
#bouncer { 
 
    position: absolute; 
 
    width: 75px; 
 
    z-index:10; 
 
    height: 100px; 
 
    border-radius: 10px; 
 
    /*background: url(../img/jump.png) no-repeat;*/ 
 
    background:green; 
 
    -webkit-animation-name: bounce; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-duration: 2.2s; 
 

 
    animation-name: bounce; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 2.2s; 
 
} 
 
#bouncer2 { 
 
    position: absolute; 
 
    z-index:11; 
 
    width: 75px; 
 
    height: 100px; 
 
    border-radius: 10px; 
 
    /*background: url(../img/pyonpyon.png) no-repeat;*/ 
 
    background:red; 
 
    -webkit-animation-name: bounce1; 
 
    -webkit-animation-iteration-count: infinite; 
 
    -webkit-animation-duration: 2.2s; 
 

 
    animation-name: bounce1; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 2.2s; 
 
}

<div class="margin"> 
 
<div id="traveler"> 
 
      <div id="bouncer"> </div> 
 
\t \t <div id="bouncer2"> </div> 
 
     </div> 
 
</div>

скрипку пример: https://jsfiddle.net/Sharan_thethy/eyjkpy8u/

Спасибо вам