2

我想用背景图像为几个 div 设置动画。我希望他们在页面上移动位置并变大。

我通过 jQuery 添加一个类来执行此操作，该类反过来会触发 Webbit 的 CSS3 转换。

我从这个开始：

.myStyle {
    width: 240px;
    height: 240px;
    top: 200px;
    -webkit-background-size: 240px;
    -webkit-transition-property: top, -webkit-background-size, width, height;
    -webkit-transition-duration: 1s;
}

添加该样式时，DIV 会更改宽度和高度，移动到新的顶部位置，但背景大小保持不变。

所以我尝试了这个：

.myStyle {
    top: 200px;
    -webkit-transform: scale(1.5);
    -webkit-transition-property: top, -webkit-transform;
    -webkit-transition-duration: 1s;

}

但是，同样的问题。顶级动画，但不是规模。

我认为（希望）这只是我的一个语法错误。还是不能转换 -webkit 属性？

4

1 回答 1

1

第一个代码不起作用，因为 webkit 无法从一个单位尺寸 (%) 动画到另一个 (px)。如果你改变...

.myStyle {
    -webkit-background-size: 150%;
}

它应该动画，但从 0 到 100%。我认为，在您的第二个示例中也发生了类似的事情。

我将着手简化代码并在进行转换之前放置转换声明。如果您删除类，这允许元素反转转换。此外，如果您要统一缩放事物，那么 -webkit-transform: scale 是要走的路。

#div {
  /*your css*/
  -webkit-transition: all 1s ease;
}

#div.animated {
  -webkit-transform: -webkit-transform: scale(1.5);
}
于 2011-03-09T07:55:34.520 回答