 |
CSSのanimationとtransform、translate、rotateY、scaleプロパティを使う |
 |
CSSのキーフレームanimationとtransform、translate、rotateY、scaleプロパティを使う
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軸回転角、拡大縮小率、透明度を変化させています。
