【问题标题】:Different durations for different properties using WebKit transitions/animation使用 WebKit 过渡/动画的不同属性的不同持续时间
【发布时间】:2011-12-12 22:21:38
【问题描述】:

我正在使用 WebKit 过渡来为某些 CSS 更改设置动画。
例如,假设我有一个红色框,当有人悬停时我想将其更改为绿色。我用这个:

-webkit-transition-duration: 200ms;
-webkit-transition-property: background;
-webkit-transition-timing-function: ease;

效果很好。但是现在,说我希望它也向下滑动一点。我用这个:

-webkit-transition-property: background, margin;

这也可以,但我希望盒子快速滑下(比如 50 毫秒)。我无法更改-duration,因为那样会使颜色动画更快。

如何为 CSS 动画中的不同属性分配不同的持续时间?
如有必要,我可以使用关键帧动画,但我还没有看到它们可以帮助我的方法。

jsfiddle for reference

【问题讨论】:

    标签: html css animation webkit webkit-transition


    【解决方案1】:

    Duratons 可以用逗号分隔,对应转换后的属性,即:

    -webkit-transition-duration: 50ms, 200ms;
    -webkit-transition-property: margin, background;
    

    http://jsfiddle.net/bQ8d7/1/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2012-11-17
      • 2011-06-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多