トップへ(mam-mam.net/)

CSSのキーフレームアニメーション(@keyframes,animation)を使う方法

検索:

animationとtransform

.imgani{animation: imgani 1.0s linear 0.00s 1 normal both running;}
@keyframes imgani{
    0%{transform:translate(0px,200px) rotateY(-360deg) scale(0.01);opacity:0.0;}
  100%{transform:translate(0px,  0px) rotateY(   0deg) scale(1.00);opacity:1.0;}
}

1秒間でキーフレームアニメーションでY軸座標、Y軸回転角、拡大縮小率、透明度を変化させています。

キーフレームアニメーション再実行