byCSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。掲載されているのは、CodePenというコードプレイグラウンドサイトです。ご紹介しているサンプルコードはすべて、無料で利用可能なものばかりです。いずれのサンプルも「CSSでこんなことができるの!」といったものばかりですので、見ているだけで楽しいし、勉強にもなりますね。CSSアニメーションはブラウザ状況によってサポート状況が異なるので、使用する場合には注意が必要ですが、魅力的であることには間違いありません。サイト制作のご参考になれば幸いです。Animation船とカエルがコミカルに海上を進むアニメーションです。Icons天気状況をアニメーションで展開。Loaders多彩なローディングアニメーション。Windowさまざまポップアップアニメーションを実装しています。Loaderカラフルな円が幻想的に回転します。Like/Unlikeハートをクリックすると、ハートブレイクしたり、成就したりするアニメーション。Throbbers円が高速で回転します。Effectsカーソルを合わせるとさまざまなホバーエフェクトを見せるアニメーション。Marker地図マーカーのアニメーション。Spiral幻想的な回転アニメーション。AirMacBookがコミカルにアニメーションします。CSS3次々と立方体が現れるアニメーション。UIスライドダウンするアニメーション。Switchアニメーションスイッチ。Gearsローディングを歯車のアニメーションで。AnimationPayPal風ローディングアニメーション。Loader一風変わったローディングアニメーション。SymbolWiFiのシンボルがアニメーション。Buttonsとってもかっこいいホバーエフェクト。Checkboxクリックするとチェックがアニメーションで。Clockアナログ時計のアニメーション。ClockRabbitかわいらしいウサギがピョンピョンと飛び跳ねるアニメーション。Barサウンドイコライザーのようなローディングアニメーション。byお役に立てましたら、以下どれでも結構のですので、ポチリと......。当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。この記事を読んだ人はこんな記事も読んでいますプロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。Prefixr」現るベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。Buttons」CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ記事を読む左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6CSSだけで作られたオフカンバスメニューをまとめてご紹介します。「オフカンバスメニュー」は、ボタ記事を読む無料で使えるフラットデザインUIキット40フラットデザインのUIキットをご紹介します。戦慄を覚えるマップです。切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。