コピペだけで作れる@keyframesを使用したCSSアニメーションを３０個ご紹介します。
animation-duration、animation-timing-function、animation-direction、animation-iteration-countなどの@keyframesプロパティを要所要所で使い分けています。
コードには説明もわかりやすく書いてあるのでかなり参考になります
完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています
Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています
Webデザイナー・フロントエンジニアに興味のある方はこちらも合わせてどうぞ↓
@keyframesのCSSアンイメーション３０選
１. 【@keyframes×filter】画像の色合いが変化するCSSアニメーション３選
@keyframesとfilterプロパティのfilter:blur、grayscale、brightness、contrast、saturateを使用して画像の色が徐々に変化していくアニメーションとなっています。
↓参考記事は下の記事です↓
２. 【@keyframes×filter】色が自由自在に変化するCSSアニメーション３選
@keyframesとfilterプロパティを使用して画像の色が徐々に変化していくアニメーションとなっています。
↓参考記事は下の記事です↓
３. 進行度合いが変化するCSSアニメーション４選【@keyframes×animation-timing-functionプロパティ】
animation-timing-function: linear, ease, ease-in-out, steps()の４つのプロパティを使用してアニメーションの進行度合い(タイミング)をカンタンに指定していきます。
↓参考記事は下の記事です↓
４. 【@keyframes×animation-direction】再生方向をカンタン指定！繰り返すCSSアニメーション４選
animation-direction:normal, reverse, alternate, alternate-reverseの４つを使用して再生方向をカンタンに指定していきます。
↓参考記事は下の記事です↓
５. 【@keyframes×translate】box-shadowが効いた3D画像が移動を繰り返すCSSアニメーション３選
@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。
↓参考記事は下の記事です↓
６. 【@keyframes×infinite×scale】拡大縮小を繰り返すCSSアニメーション３選【使い方も解説！】
@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。
↓参考記事は下の記事です↓
７. 【@keyframes×infinite×rotate3d】360°ずっと回り続けるCSSアニメーション３選【3Dアニメーション】
@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。
transform:rotate3dで立体的な回転エフェクトとinfiniteで永遠に回転し続けるCSSアニメーションを実現。
↓参考記事は下の記事です↓
８. 【@keyframes×infinite×rotate】永遠に回転し続けるCSSアニメーション３選【CSSの本気見せます】
@keyframesのプロパティのanimation-durationやanimation-timing-function、animation-iteration-count: infinite;など５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。
transform:rotateの回転エフェクトとinfiniteで永遠に回転し続けるCSSアニメーションを実現しました。
↓参考記事は下の記事です↓
９. 【初心者】@keyframesを使ったシンプルなCSSアニメーション３選【@keyframesプロパティ解説】
@keyframesのプロパティのanimation-durationやanimation-timing-functionなど５種類を使用して、初めての方でも理解できるように@keyframesをわかりやすく解説しています。
↓参考記事は下の記事です↓
まとめ
@keyframesを使用したCSSアニメーションを３０個ご紹介しました。
エンジニアの情報発信はかなり有益なので副業でブログ運営をするのがオススメです。
特に昨今ですとフリーランス需要が増えたことに伴い、プログラミングへ興味を持つ方が急激に増えていることがGoogleのアクセスデータで明らかになっています。
技術系の情報はわかりやすく再現性の高いものが多くないため今がチャンスです。
下の記事ではエンジニアが技術ブログを始めるメリットと開設手順を徹底解説しています。
・エンジニアでもブログを始めるメリットってなんだろう？
・個人ブログってQiitaと何が違うのかな？
・エンジニアだけどブログで稼げるのかな？
・どれくらいの期間継続したら稼げるようになるのかな？
・ブログ開設でかかる費用っていくらだろう？
・エンジニアだけどブログ始めてみたいけど何から始めればいいんだろう？
こんなお悩みを全て解決しています。
