Question

我有一个div需要以方形开始，70px x 70px并缩放到更大的矩形140px x 210px 由于某种原因，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/

EDIT ::::: 正确的FIDDLE：

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

Answer 1

您的代码适用于Chrome / Webkit，而不适用于其他浏览器（例如Firefox）。

您必须添加前缀才能支持所有浏览器。另外，正确的比例是宽度* 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/

（在小提琴中，它没有显示出良好的效果＆＃39;因为盒子已被绝对定位并被裁剪：更改top和left值以正确查看）

Answer 2

您的Keyframe语法不正确。看起来应该是这样的

@-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/

如何使用css动画使我的div比例大于原始大小？

2 个答案: