具有彈性圖像效果的動畫（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”動畫必須具有不同的屬性。