
CSSアニメーションの基本を抜粋
ドーモ!ぬま畑です!
今日はちょっと普段とかけ離れたお話。
今現在webプログラミングの勉強をしていて、何か記録を残したいなということでそれならそのままメモがてら勉強したことをブログに残していこうと思いました。
テーマとして何回続くかわからないですし結構な不定期ですが、少しずつ行っているのでそれの一環として勉強した内容をそのまま流用する形で載せていこうと思います。
ちなみに、参考書として使用したものがありまして記事やその他を彩るWeb上での動きを勉強できるデザインアイデアが詰まった一冊、『動くWebデザインアイディア帳』というものがあります。
それがこちら。

これからWebを学ぶという初心者や、思い出して使用するという上級者まで実践で使えるコード(サンプル)がびっしり書かれた良い本です。
今からwebプログラミングの勉強するぜ!と言う人はここの記事(シリーズ)でも勉強できるとは思いますが、あくまで僕用のメモなので実際に使用する場合はこの本の購入をおすすめします。
実際のコード等は時間がある時にショートコードのスポイラー等を使用して記載しますが、実際の中身を確認したいって人はソースコード表示とかPCでChromeブラウザ使用してるならF12、スマホの人は…そのスポイラーが記入されるまでお待ち下さいm(_ _)m
で、実際に移植して動かせるものは下記となります。
アニメーション1回分の時間の長さを指定したい
アニメーションの開始を遅らせたい
動きをループさせたい
アニメーションの進行具合を操作したい
アニメーションをまとめて設定する
実際のコード
いかがでしたでしょうか?
正直一瞬だけなのでスマホだと『え?これちゃんと動いてるの?』みたいになってわかりにくいです。
PCだとF5でページの更新とかスマホだとブラウザの更新をかけると見れますので動きを再度確認したいという方は更新をしてみてください。
とにかく、本自体も分かりやすくサンプルも商用利用等を行っても問題ないようなので、気になるという方やこれからWebで何かをする勉強するという方は一度この本を手にとってみても良いかも知れませんね。
それでは、最後までお読み頂きありがとうございましたノシ
[template id=”2699″]