Safari -webkit-transition-property ：动画缩放和/或背景大小

Question

我想用背景图像制作几个 div 的动画。我希望它们移动页面上的位置并变得更大。

我通过 jQuery 通过添加一个类来完成此操作，该类反过来将触发 Webit 的 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 属性？

Answer 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);
}