css3で回転(時計回り)
2018年5月18日 css3
CSS3で2D右回転アニメーションしてみました。
.rote {display:block; width:100px;animation: rote 1.5s ease 0s infinite;}
@keyframes rote {
0% {transform: rotate(0deg);}
50% {transform: rotate(-180deg);}
100% {transform: rotate(360deg);}
}
回転します
-指定で逆回転です。
値を変更できます。
ease
linear
ease-in
ease-out
ease-in-out
右側は0sからイーズを持たせるかどうか。
infiniteは無限ループ