CSSアニメーション

Question

前に変換を適用すること、私は次のような状況があります。

#animation-target { 
 
    transform: rotate(90deg); 
 

 
    width: 50px; 
 
    height: 100px; 
 
    animation: peek-from-left 1000ms linear; 
 
} 
 

 
@keyframes peek-from-left { 
 
    0% { transform: translate(-100%, 0) } 
 
    100% { transform: translate(0, 0) } 
 
    }

<div id="animation-target"> 
 
    <img src="http://placehold.it/50x100"/> 
 
</div>

のみアニメーションの後に適用される変換を、私はそれが周りに他の方法で作業する必要があります。変換を最初に行うにはどうすればよいですか？

Answer 1

デフォルトのプロパティ（90度回転）を設定してから、水平方向の平行移動をアニメートするときに回転を上書きします。アニメーションが終了すると、デフォルト状態に初期化されます。

回転を維持したい場合は、アニメーションで回転を指定する必要があります。

これに伴う問題はしかしあるトランスフォームを使用して回転すると、幅は、変換元のハックしたがって、今の高さです:)

body { 
 
    margin: 0; 
 
} 
 

 
#animation-target { 
 
    transform: translate(100%, 0) rotate(90deg); 
 
    transform-origin: 50% 25%; 
 
    width: 50px; 
 
    height: 100px; 
 
    animation: peek-from-left 1000ms linear; 
 
} 
 

 
@keyframes peek-from-left { 
 
    0% { transform: translate(-100%, 0) rotate(90deg) } 
 
    100% { transform: translate(100%, 0) rotate(90deg) } 
 
}

<div id="animation-target"> 
 
    <img src="http://placehold.it/50x100"/> 
 
</div>