如何使用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缩放比原始大小更大？

回答

相关问题