如何在同一時間調整大小和移動CSS分區？

我有，我會具有不同的情況下，五顏六色的塊（即太師）的動態相除。點擊該框，我希望他們擴大覆蓋整個屏幕&。問題是，當箱子正在擴大，他們在那裏自己的位置擴大&屏幕不轉向.. 我用：如何在同一時間調整大小和移動CSS分區？

.elemented1 { 
    width: 100%; 
    height: 100%; 
    -webkit-animation: elemen1 0.3s; 
    border: 0px; 
} 

@-webkit-keyframes elemen1 { 

    from { 
     width: 49.6%; 
     height: 39.6%; 
    } 

    to { 
     width: 100%; 
     height: 100%; 
    } 
}

這是工作正常，但我必須把塊動態。我不能爲各個區塊編寫動畫，因爲它們的大小不同。

來源

2013-06-25 Prince Agrawal

爲什麼不使用jQuery和有它在非WebKit瀏覽器的工作呢？ –

Thanx快速回復...我的老闆討厭jQuery ..所以必須在css3中做到這一點.. :( –

嘗試使用 -webkit-transform：翻譯（左，頂部） –

最後痛苦的4小時後我得到它之前。

這是動畫代碼：

@-webkit-keyframes animateExpansion 
{ 
    from 
    { 
    width:49.6%; 
    height:49.6%; 
    left: attr(left %); 
    top: attr(top %); 
    -webkit-transform:translate(0%,0%); 
    } 

    to 
    { 
    width:100%; 
    height:100%; 
    left: 0%; 
    top: 0%; 
    -webkit-transform:translate(0%,0%); 
    } 
}

，並在這裏不用的javascript：

function onLayoutClick(){ 

      var style = window.getComputedStyle(this); 
      var this_Top=(style.getPropertyValue('top')); 
      var this_Left= (style.getPropertyValue('left')); 

      this.setAttribute("style","border:0px;width:100%;height:100%;-webkit-transform:translate(-"+this_Left+",-"+this_Top+");-webkit-animation:animateExpansion 0.5s ease-in-out"); 
      var layouts = document.getElementsByClassName("layouts"); 
      for(i = 0 ;i<layouts.length; i++) 
      { 
       layouts[i].style.zIndex="-1"; 
      } 

      this.style.zIndex="0"; 
}

來源

2013-06-25 12:33:13

您可以使用CSS3動畫至於你的要求是同意的情況CSS3框架...

可能是你應該使用，Anima.js，它是CSS3 + JS框架 ...

否則你也可以嘗試Move.js和Animate.css CSS3動畫框架...

Animate.css是一個純粹的CSS3動畫framewo RK ...

注： -只需使用檢查CSS3動畫的瀏覽器兼容性...

謝謝...

來源

2013-06-25 05:34:49 SaurabhLP

如何在同一時間調整大小和移動CSS分區？

回答

相關問題