【プログラミング初心者向け】CSSでできるアニメーション

日々の学習




こんにちは。
今日も、書籍を見てHTML/CSSのお勉強をしていました。

そこでCSSだけでアニメーションを作れる、ちょっと楽しい機能を学んだのでご紹介。
JavaScriptできなくてもOKじゃない?と思ったのは内緒です。

手順

最初に、HTMLに適当にコードを書きます。

CSSも書きます。

そうすると、こんな感じで表示されます。

そして、CSSの11行目以降にanimationプロパティと@keyframesを追加します。

※animationは、@keyframesとセットで使うプロパティです。

そうすると、文字が点滅します!

これだけのことですが、非常に楽しいです。

さいごに

私のように、JavaScriptやjQueryに行き詰まっていたり、意味不明な初心者にぴったり。

設定方法もたくさんあるので、ぜひいろいろ調べて遊んでみて下さい!

タイトルとURLをコピーしました