首页 文章

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

提问于
浏览 次
1

我想用背景图像为几个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属性？

css webkit css3 transitions

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);
}
    回复于

相关问题