具有弹性图像效果的动画（CSS3和JS）

Question

我在Apple.com上发现了一个非常有趣的动画效果

http://store.apple.com/au/buy-mac/mac-pro

顶部的菜单栏，非常有趣的菜单栏，因为图像也具有弹性。 我在下面做了一个快速实验，它可以工作，但是没有弹性效果，有人可以在这里帮忙吗？ 希望对我的项目使用这种影响。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    $('ul').click(function() {
      $('ul li').each(function(i) {
        var $li = $(this);
        setTimeout(function() {
          $li.attr('style', 'styel="-webkit-transform: translateX(500px);"');
        }, i*100); // delay 100 ms
      });
    });
})
</script>
<style type="text/css">
li
{

    float: left;

    -webkit-transition-property: -webkit-transform,left,-webkit-box-shadow;
    -moz-transition-property: -webkit-transform,left,-webkit-box-shadow;
    transition-property: -webkit-transform,left,-webkit-box-shadow;
    -moz-transition-property: -moz-transform,left,-moz-box-shadow;
    -ms-transition-property: -ms-transform,left,box-shadow;
    -o-transition-property: -o-transform,left,box-shadow;
    -webkit-transition-duration: .4s,0.4s,100ms;
    -moz-transition-duration: .4s,0.4s,100ms;
    transition-duration: .4s,0.4s,100ms;
    -moz-transition-duration: .4s,0.4s,100ms;
    -ms-transition-duration: .4s,0.4s,100ms;
    -o-transition-duration: .4s,0.4s,100ms;
    -webkit-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -moz-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -moz-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -ms-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -o-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    transition-property: transform,left,box-shadow;
    transition-duration: .5s,0.5s,100ms;
    transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
}
li.what
{
    -webkit-transform: translateX(878px);
}
</style>

<ul>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
</ul>

Answer 1

不是完美的动画，但这可以帮助您：

CSS

.container {
    width: 550px;
    height: 50px;
    overflow: hidden;
}

.child {
    border-left: 1px solid #660000;
    height: 50px;
    display: inline-block;
    width: 100px;
    font-size: 28px;
    position: relative;
    background-size: 60px 40px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: left;

    transition-duration: 1.5s;
    transition-property: all;
    transition-timing-function: ease-out;
}

 .child:nth-child(1) {
     background-image: linear-gradient(90deg,lightgreen,lightgreen);
     transition-delay: 0.3s;
}

 .child:nth-child(2) {
     background-image: linear-gradient(90deg,lightblue,lightblue);
     transition-delay: 0.5s;
}
 .child:nth-child(3) {
     background-image: linear-gradient(90deg,lemonchiffon,lemonchiffon);
     transition-delay: 0.7s;
}
 .child:nth-child(4) {
     background-image: linear-gradient(90deg,lavender,lavender);
     transition-delay: 0.9s;
}
 .child:nth-child(5) {
     background-image: linear-gradient(90deg,linen,linen);
     transition-delay: 1.1s;
}

.container:hover .child {
   left: 550px;    
   padding-left: 70px;
    transition-timing-function: ease-in;
}

.container:hover .child:nth-child(1) {
     transition-delay: 1.1s;
}
 .container:hover .child:nth-child(2) {
     transition-delay: 0.9s;
}
.container:hover .child:nth-child(3) {
     transition-delay: 0.7s;
}
.container:hover .child:nth-child(4) {
     transition-delay: 0.5s;
}
.container:hover .child:nth-child(5) {
     transition-delay: 0.3s;
}

小提琴

在小提琴中，将鼠标悬停在元素上以查看动画。

请注意，“ out”和“ in”动画必须具有不同的属性。