javascript - 使用css3关键帧动画的弹跳效果

Question

我正在使用 css3 尝试弹跳效果关键帧动画。这是 fiddle 链接:click

框的背景正在改变，但我的要求是为背景图像而不是背景颜色提供弹跳效果。

我到底需要什么:在蹦床上弹跳(跳跃)的泰迪熊有两种状态:
(1. ARM 向上，2. ARM 向下)同时跳跃。

任何想法如何实现它？谢谢!

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;
	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;
	
  }
}
@keyframes bounce1 {
  from, to  {
    bottom: 45px;
    animation-timing-function: ease-out;
  }
  50% {
    bottom: 140px;
	z-index:9;
    animation-timing-function: ease-in;
	
  }
}

/* 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>
		   <div id="bouncer2"> </div>
        </div>
</div>

fiddle 示例:https://jsfiddle.net/Sharan_thethy/eyjkpy8u/

谢谢