使用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自​​定義參數
• 轉發：將在動畫結束後將樣式保持在所需的 狀態。