CSSのアニメーションについて

Question

CSSのアニメーションについて質問です。

画像の単純な拡大・縮小を繰り返す場合、下記で
動くかと思いますが、その際に左上を起点に拡大・縮小されます。

@keyframes anime1 {
0% {width: 100px; height: 50px;}
100% {width: 200px; height: 50px;}
}

拡大・縮小の起点を変更するにはどうすればよろしいでしょうか？

Answer 1

transformを使えば簡単です。

動かす要素{
transform-origin:left top;
}

@keyframes anime1 {
0% {
transform:scale(1,1);

}
100% {
transform:scale(拡大率,拡大率);
}
}

基準点が真ん中が良ければtransform-origin:center;としてください。
右下ならばtransform-origin:right bottom;です。

transform以外の方法だとx軸y軸共に０，０の左上が基準点になってしまうかと思います。

Comments

[hayakawatakuma]

解決しました！
迅速なご回答ありがとうございました！