使用div的多个属性和多个webkit转换延迟的CSS3 webkit转换

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：重复
• 易于IN- out：定时算法，也可以是线性的，易入，易出，或立方贝兹 w ith自​​定义参数
• 转发：将在动画结束后将样式保持在所需的 状态。