• 投稿日:2023年05月10日 08時43分59秒
  • 更新日:2023年05月30日 13時28分48秒
CSSアニメーション:カク回転

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

最後に

JSアニメーション:文字の登場
CSSアニメーション:カク回転
画面右下固定のスクロールボタン
擬似クラス【hover / nth-of-type / nth-child】
疑似要素【before/after】
positionプロパティ(位置指定)について
タグにマウスホバーしたとき下線を走らせる
モーダルな画面を表示をする