使用css3關鍵幀動畫的彈跳效果

Question

我正在嘗試使用關鍵幀動畫的css3彈跳效果。 這裏是小提琴鏈接：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/

謝謝