- 投稿日：2023年05月10日 08時43分59秒
- 更新日：2023年05月30日 13時28分48秒
CSSアニメーション：カク回転
デモ
説明・補足・注意事項
CSSのみで作成されたカクつく回転アニメーションです。
対象DOMにクラスを指定
<img class="logo animation scratching-rotate" src="https://note.addnew.jp/wp-content/uploads/2022/01/無題-2.jpg" />
アニメーション設定
.animation{
animation-duration: 2.5s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}アニメーション定義
.animation.scratching-rotate{
animation-name: scratchingRotate;
}
@keyframes scratchingRotate {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(30deg);
}
23% {
transform: rotate(90deg);
}
25% {
transform: rotate(90deg);
}
35% {
transform: rotate(120deg);
}
48% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
60% {
transform: rotate(210deg);
}
73% {
transform: rotate(270deg);
}
75% {
transform: rotate(270deg);
}
85% {
transform: rotate(300deg);
}
97% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}