cssアニメーション (keyframes)

<aside> <img src="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" alt="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" width="40px" /> 各ページへのリンク

</aside>

参考動画＆参考記事

https://youtu.be/byfMlqFKcZo

RyoBlog

コード

"animation": {
    "prefix": "animation",
    "body": [
        "animation-name: animation-name;",
        "animation-fill-mode: backwards;",
        "animation-duration: 2s;",
        "animation-iteration-count: infinite;",
        "animation-delay: 0.5s;",
        "animation-direction: normal;",
        "animation-timing-function: ease;",
        "@keyframes animation-name {",
        "    0% {",
        "        ",
        "    }",
        "    ",
        "    100% {",
        "        ",
        "    }",
        "}",
    ],
    "description": "animationの型"
},

<aside> <img src="/icons/magic-wand_blue.svg" alt="/icons/magic-wand_blue.svg" width="40px" /> プチアドバイス

下記のように、学習しためもを read という形でまとめてスニペットに登録しておくと、ググる回数が減らせて良いと思いますのでおすすめです！！ (グラデーションもついでに作ってみました！！) </aside>

"read-animation": {
    "prefix": "animation-read",
    "body": [
        "//== Detail ===============================================",
        "// animation-name",
        "//      keyframesで指定したアニメーションの名前",
        "// animation-fill-mode",
        "//      backwards：待ち時間にアニメーション開始時のスタイルが適用",
        "//      forwards：再生後アニメーション終了時のスタイルが適用",
        "//      both: 上記両方適用",
        "// animation-duration",
        "//      アニメーションの開始から終了までの時間",
        "// animation-iteration-count",
        "//      アニメーションを繰り返す回数 (無限の場合は infinite)",
        "// animation-delay",
        "//      アニメーションの開始時間の設定",
        "// animation-direction",
        "//      infinite指定の場合の繰り返しの方向を指定",
        "//          reverse: 逆方向",
        "//          alternate: 順方向と逆方向が交互に再生",
        "//          alternate-reverse: 逆方向から再生し、alternateの振る舞い",
        "// animation-timing-function",
        "//      linear: 一定速度　　　　ease: 開始・終了時緩やか",
        "//      ease-in: 開始時緩やか　 ease-out: 終了時緩やか",
        "//      ease-in-out: easeよりもさらに緩やか",
        "//=========================================================",
    ],
    "description": "cssアニメーションの説明(忘れたときに見る用)"
},

"read-grade": {
    "prefix": "gradation-read",
    "body": [
        "// 基本 ========================",
        "// ★線型グラデーション",
        "// ▶︎ background-image: linear-gradient(to direction, start, end);",
        "// ",
        "// ★角度の指定",
        "// ▶︎ direction(方向) → deg(角度)へ変更可能",
        "// ",
        "// ★円形グラデーション",
        "// ▶︎ linear → radial に変更",
        "// ▶︎ to directionを消す",
        "//",
        "// ★テキストの場合",
        "// -webkit-background-clip: text; //グラデーションをかける領域を指定",
        "// -webkit-text-fill-color: transparent; //テキストを透明に",
        "//",
        "// ★枠線の場合",
        "// ▶︎ background-image → border-imageに変更",
        "// border-image-slice: 1; //枠線にグラデーションを指定",
        "// =============================",
    ],
    "description": ""
},

グラデーションについての参考動画 & 参考記事

https://www.youtube.com/watch?v=KBvYE9C2zsA

RyoBlog