如何使用css動畫讓我的div縮放比原始大小更大？

我有一個div需要開始爲一個正方形，70px x 70px和縮放到一個更大的矩形140px x 210px 由於某些原因，div不會縮放到大於原始大小。我怎樣才能做到這一點？如何使用css動畫讓我的div縮放比原始大小更大？

這是我的代碼：

HTML：

<div id="tab"> 
    </div>

CSS：

#tab { 
-webkit-animation: enlarge 5s forwards; 
width: 140px; 
height: 210px; 
position: absolute; 
left: 15px; 
top: 0px; 
background-color: red; 
} 

@-webkit-keyframes enlarge{ 
0% {-webkit-transform: scale(1,1)}; 
100% {-webkit-transform: scale(2,4)}; 
}

http://jsfiddle.net/kacmuhuw/1/

編輯::::: 正確FIDDLE：

http://jsfiddle.net/kacmuhuw/6/

來源

2014-09-24 user3589485

小提琴似乎適合我嗎？ – 2014-09-24 12:42:36

對不起，我沒有改變從我如何測試它的小提琴。它應該開始爲一個70x70的正方形，並放大到一個140x210的矩形 – user3589485 2014-09-24 12:44:57

我想知道爲什麼它不會變大，如果它從一個尺寸開始？ – user3589485 2014-09-24 12:46:35

您的關鍵幀語法不正確。它應該是這樣的

@-webkit-keyframes enlarge{ 
    0% { -webkit-transform: scale(0,0) } 
    100% {-webkit-transform: scale(3,4) } 
}

演示：http://jsfiddle.net/kacmuhuw/8/

沒有分號的}

，並提供更新的jsfiddle到底是更簡單：

@-webkit-keyframes enlarge{ 
    100% {-webkit-transform: scale(2,4)} 
}

新演示：http://jsfiddle.net/kacmuhuw/9/

來源

2014-09-24 12:48:23

非常感謝！ – user3589485 2014-09-29 10:38:39

您的代碼適用於Chrome/Webkit，不適用於其他瀏覽器（例如，火狐）。

您必須添加前綴才能支持所有瀏覽器。此外，正確的比例寬* 2和高* 3：

#tab { 
    -moz-animation: enlarge 5s forwards; 
    -ms-animation: enlarge 5s forwards; 
    -o-animation: enlarge 5s forwards; 
    animation: enlarge 5s forwards; 
    ... 
} 

... 

@-webkit-keyframes enlarge{ 
    100% {-webkit-transform: scale(2,3)} 
} 
@-ms-keyframes enlarge{ 
    100% {-ms-transform: scale(2,3)} 
} 
@-o-keyframes enlarge{ 
    100% {-o-transform: scale(2,3)} 
} 
@-moz-keyframes enlarge{ 
    100% {-moz-transform: scale(2,3)} 
} 
@keyframes enlarge{ 
    100% {transform: scale(2,3)} 
}

http://jsfiddle.net/kacmuhuw/10/

（在它不顯示以及「事業框絕對定位和它的裁剪小提琴：變化top和left值看到它正確）

來源

2014-09-24 12:43:27

如何使用css動畫讓我的div縮放比原始大小更大？

回答

相關問題