關鍵幀動畫去除動畫上的div偏移

Question

我有一個應用於div的扭曲變換，我希望在頁面加載時爲其設置動畫效果。

當我使用關鍵幀動畫時，歪斜在動畫過程中被移除，然後在動畫完成後「彈出」到位。

如何在動畫進行過程中將偏斜應用於div？

div { 
 
    -webkit-transform:skew(-197deg); 
 
    -moz-transform:skew(-197deg); 
 
    transform:skew(-197deg); 
 
    width: 200px; 
 
    margin-left: 40px; 
 
    animation: 1s ease-in-out 0s 1 slideInFromLeft; 
 
} 
 

 
@keyframes slideInFromLeft { 
 
    0% { 
 
    transform: translateX(-100%); 
 
    opacity: 0; 
 
    } 
 
    60% { 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    transform: translateX(0); 
 
    opacity: 1; 
 
    } 
 
}

<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>

Answer 1

您需要的skew添加到動畫或者動畫規則將覆蓋它。

div { 
 
    -webkit-transform:skew(-197deg); 
 
    -moz-transform:skew(-197deg); 
 
    transform:skew(-197deg); 
 
    width: 200px; 
 
    margin-left: 40px; 
 
    animation: 1s ease-in-out 0s 1 slideInFromLeft; 
 
} 
 

 
@keyframes slideInFromLeft { 
 
    0% { 
 
    transform: skew(-197deg) translateX(-100%); 
 
    opacity: 0; 
 
    } 
 
    60% { 
 
    opacity: 0.5; 
 
    } 
 
    100% { 
 
    transform: skew(-197deg) translateX(0); 
 
    opacity: 1; 
 
    } 
 
}

<div>Hello, this is a skewed div that does not stay skewed when the animation is in progress.</div>