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

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

1 个答案: