アニメーションの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>