CSSのアニメーションは回転を無視します

Question

私はアニメーションを作ろうとしています。

要素の一つ

#element { 
    position: absolute; 
    width: 38%; 
    height: auto; 
    animation: ani 250ms ease-in; 
    -webkit-animation: ani 250ms ease-in; 
    transform: rotate(82deg); 
} 

キーフレーム

@keyframes ani { 
    0% { 
     transform: scale(1.5); 
     -webkit-transform: scale(1.5); 
    } 
    100% { 
     transform: scale(1.0); 
     -webkit-transform: scale(1.0); 
    } 
} 

HTML

を：ここで

は、私が持っているものです

<div id="wrapper"> 
    <img id="element" src="img.svg"> 
    <img id="element2" src="img2.svg"> 
</div> 

問題は、アニメーションが開始するたびに要素が回転しないように表示され、アニメーションが終了した後にのみ回転することです。どのようにアニメーションの前にそれらを強制的に回転させることができますか？

Answer 1

あなたが同様にアニメーションに変換して回転コードを組み合わせる必要があります。基本的にrotateとscaleは両方ともtransformというプロパティの値なので、アニメーションでスケールのみを使用すると、rotateの値がオーバーライドされ、scaleと表示されます。

#element { 
 
    position: absolute; 
 
    width: 38%; 
 
    height: auto; 
 
    animation: ani 250ms ease-in; 
 
    -webkit-animation: ani 250ms ease-in; 
 
    transform: rotate(82deg); 
 
} 
 

 
@keyframes ani { 
 
    0% { 
 
     transform: scale(1.5) rotate(82deg); 
 
     -webkit-transform: scale(1.5) rotate(82deg); 
 
    } 
 
    100% { 
 
     transform: scale(1.0) rotate(82deg); 
 
     -webkit-transform: scale(1.0) rotate(82deg); 
 
    } 
 
}

<div id="wrapper"> 
 
    <img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif"> 
 
    <img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg"> 
 
</div>

Answer 2

あなたはキーフレームにあなたの回転を移動する必要があります。

#element { 
    position: absolute; 
    width: 38%; 
    height: auto; 
    animation: ani 250ms ease-in; 
    -webkit-animation: ani 250ms ease-in; 
} 

@keyframes ani { 
    0% { 
     transform: scale(1.5) rotate(0deg); 
     -webkit-transform: scale(1.5) rotate(0deg); 
    } 
    100% { 
     transform: scale(1.0) rotate(82deg); 
     -webkit-transform: scale(1.0) rotate(82deg); 
    } 
}