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

Question

我正在尝试通过向右滑动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;
}

Answer 1

您可以为此使用关键帧：

@-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：重复
缓入：时序算法，也可以是线性，缓入，缓入或三次方贝塞尔曲线
具有自定义参数
转发：将样式保持在所需的状态
动画结束后的状态。