CSSアニメーションの基本｜transitionとanimationの使い方・違い・活用例を解説
See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
animation-iteration-count 値の種類内容1（初期値）1回だけ再生回数その回数分だけ再生infinite無限に再生See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
animation-direction 値の種類内容normal（初期値）0%→100%の流れで再生reverse100%→0％の流れで再生alternate2回以上再生する場合、奇数回は0%→100%の流れで再生偶数回は100%→0%の流れで再生alternate-reverse2回以上再生する場合、奇数回は100%→0%の流れで再生偶数回は0%→100%の流れで再生See the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
animationアニメーション例：擬音表現編
ゆらゆら ふわふわ ぽよんアニメーション例：ボタン編
大きくなり、色が変わるボタン キラッと光るボタン 色が変わり、矢印の装飾が動くボタン 色が反転するボタンアニメーション例：文字装飾編
テキストがだんだん表示されるSee the Pen Untitled by Kana odo (@Kana-nnc) on CodePen.
テキストにマーカーを引く ナビゲーションメニュー1 ナビゲーションメニュー2アニメーション例：おもしろ編
車窓から見える風景 サーチライト 風船が飛んでいくGOTOTOPボタンまとめ
STUDIO NNC 合同会社ではさまざまなアニメーション表現を得意としています。制作のご相談がございましたら、お気軽にコンタクトフォームよりお問い合わせください！
- https://coco-factory.jp/ugokuweb/css02/
- https://developer.mozilla.org/ja/docs/Web/CSS
RECENT ENTRIES
- Web制作会社がAIを導入して変わったこと｜実例付きメリット・デメリット
- 【ローカルWordPress】https://localhost に勝手にリダイレクトされる原因と解決法｜SSLエラー「ERR_SSL_PROTOCOL_ERROR」の直し方
- GEO・SGEとは？SEOとの違い | 導入方法や効果など徹底紹介
- コーディング不要でハンバーガーメニュー作成！「Hamburger Menu Generator」の使い方と特徴を徹底解説