Safari -webkit-transition-property：动画比例和/或背景大小

Question

我想用背景图片制作几个 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 属性？

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