動畫不起作用

我想創建一個頁面，點擊它打開頁面右側的div。動畫完成開幕。當我從右側打開一個div我想，在div將擴大，並全部由動畫，我寫動畫不起作用

<button onclick="Animation();">click</button> 

<Div> 
    <Table style="float:right"> 
     <tr> 
      <td> 
       <div id="dummy" style="height:0"> 
       </div> 
      </td> 
     </tr> 
     <tr> 

      <td> 
       <div> 
       list view 1 
       </div> 
      </td> 
      <td> 
       <div> 
       list view 2 
       </div> 
      </td> 
      <td> 
       <div> 
       list view 3 
       </div> 
      </td> 

      <td> 
       <div id="dummy1">right </div> 
      </td> 
     </tr> 
    </Table> 
</div> 

    function Animation() { 

      var right_div = jQuery("#dummy1"); 
      right_div.first().addClass("bounceInRight"); 
     } 

    .bounceInRight 
{ 
width:80px; 
    background:yellow; 
    -webkit-animation: bounceInRight 5s; /* Chrome, Safari, Opera */ 
    animation: bounceInRight 5s; 
} 


    @-webkit-keyframes bounceInRight { 
    0%, 60%, 75%, 90%, 100% { 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    } 

    0% { 
    opacity: 0; 
    -webkit-transform: translate3d(3000px, 0, 0); 
    transform: translate3d(3000px, 0, 0); 
    } 

    60% { 
    opacity: 1; 
    -webkit-transform: translate3d(-25px, 0, 0); 
    transform: translate3d(-25px, 0, 0); 
    } 

    75% { 
    -webkit-transform: translate3d(10px, 0, 0); 
    transform: translate3d(10px, 0, 0); 
    } 

    90% { 
    -webkit-transform: translate3d(-5px, 0, 0); 
    transform: translate3d(-5px, 0, 0); 
    } 

    100% { 
    -webkit-transform: none; 
    transform: none; 
    } 
}

但首先股利擴大和動畫是行爲，我怎麼可以讓它同時性？該div將作爲動畫的一部分更大

來源

2014-09-25 Ortal Blumenfeld Lagziel

這樣的 - > http://jsbin.com/haqigiliroze/1/edit – 2014-09-25 11:06:08

不完全，如果你有兩個div從右側進入，並使當前的一個更小（同時具有動畫）。 – 2014-09-25 11:24:22

你最好的選擇可能是使用粉底。這是一個非常棒的框架，我認爲它提供了您在尋找的其他工具以及我認爲非常有用的工具。

如果你不想使用框架，這是完全可以理解的，儘管我會推薦Foundation。

看看它有什麼提供的，它將使網頁設計更簡單:)

來源

2014-09-25 12:43:43

動畫不起作用

回答

相關問題