CSS3 webkit-transition使用div的多个属性和多个webkit-transition-delay

时间:2011-12-19 18:09:43

标签: css css3 webkit

我试图通过向右滑动200px然后将其缩小一半来转换div。我想滑动那么减小div的比例,但是我不能让2个变换独立运行,它同时滑动和重新缩放。我认为webkit-transition-delay会解决这个问题,但它只会将指定的最后一个延迟(在本例中为2s)应用于两个转换。有什么想法吗?

.example-3-transform {
            -webkit-transform: translate(200px) scale(0.5);
            -webkit-transition-property: webkit-transition-translate, webkit-transition-scale;
            -webkit-transition-duration: 1s, 1s;
            -webkit-transition-timing-function: ease-in-out, ease-in-out; 
            -webkit-transition-delay: 0s, 2s;
}

1 个答案:

答案 0 :(得分:9)

您可以使用关键帧:

@-webkit-keyframes myanim {

  50% { -webkit-transform: translate(200px) scale(1) }
  100% { -webkit-transform: translate(200px) scale(0.5) }

}

.example-3-transform { -webkit-animation: myanim 5s 1 ease-in-out forwards }

参数是:

  • 5s:动画持续时间
  • 1:重复
  • easy-in-out:定时算法,也可以是线性,缓入,缓出或立方贝塞尔 使用自定义参数
  • 前锋:将风格保持在理想状态 动画结束后的状态。