• 投稿日：2023年05月10日 08時43分59秒
  • 更新日：2023年05月10日 08時44分01秒

デモ

説明・補足・注意事項

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);
    }   
}