CSSを使っていろんなものを動かしてみる
例えばこんなの
See the Pen border animation by Ryoto kubo (@Ryotokubo) on CodePen.
よくwebサイトで見かけると思いますが、実はCSSだけなんですね。
こういうのもそう。
See the Pen QPLmGX by Ryoto kubo (@Ryotokubo) on CodePen.
全てCSSのみです。
これを使えば要素にカーソルを乗せたとき画像を少し大きくしたり、時間差で色を変えるなんてこともできます。
転職を志しhtmlとCSSを学び始めると、行き着くとこはポートフォリオ作成だと思います。
その過程の中で「少しでも見た目を良くしたい」「凝りたい！」みたいな気持ちもあるかと思います。
そんなときCSS アニメーション使ってみましょう
尚、ここではややこしいコードの説明は割愛します。
興味がある方はgoogleで
「CSS アニメーション 」
「CSS animation」
「CSS animation まとめ」
などと調べてみてください。様々なパターンが見れて「あっ！これもCSSでできるんだ」と思う動きがあるはずです。
尚、コードの詳細が知りたい方は
「animation keyflames」
と検索してみてください。
animationで動きの設定を作ってあげて、keyflamesでどう動くのかを設定してあげるといった感じなのですが、設定にも種類があり設定次第では様々な動きがつけられますので。
では。