CSS Animo
div{display:inline-block;width:13px;height:13px;background:#f39c12;border-radius:50%;animation:bouncing-loader .6s infinite alternate}.animoBouncingLoader::after,.animoBouncingLoader::before,.animoBouncingLoader>div{content:''}.animoBouncingLoader>div{margin:0 5px}.animoBouncingLoader>div{animation-delay:.2s}.animoBouncingLoader::after{animation-delay:.4s}@keyframes bouncing-loader{to{opacity:.1;t
CSSアニメーションで動く背景に！CSSアニメーションバックグラウンド12選
動的なWEBデザインは今では当たり前。 ただ実装しようと思うとサイトが重くなってしまったり、ゴチャゴチャしたりしてしまいますよね。 そこで今回は軽量かつ、シンプルでオシャレな実用的な動く背景CSSをご紹介します。 ぜひ自身の制作するサイトに組み込んでみてはいかがでしょうか。 ホタルが飛ぶアニメーション背景CSSSee the Pen CSS Fireflies by Mike Golus (@mikegolus) on CodePen. グラデーションの色が変化するアニメーション背景CSSSee the Pen Pure CSS3 Gradient Background Animation by Manuel Pinto (@P1N2O) on CodePen. 動く方眼アニメーション背景CSSSee the Pen Pure css infinite background animati
CSSアニメーションを簡単に実装できるライブラリ 10＋ - NxWorld
ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコードを出力してくれる便利なジェネレータも併せて紹介します。 Animate.css 共通classである.animatedと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass（.infinite）も用意されています。 76アニメーション用意されており、ライセンスはMITです。 cssanimation.io 基本的には共通classである.cssanima
【css】アニメーションの再生を終了時で固定する方法！
はじめに 今回紹介する方法は「css」を使ったアニメーションの実装で、完了時に終了地点で止めておく方法です。 まずは、こちらの動画から実際の動作を確認しておきましょう。 こんな感じでアニメーションの完了地点を終了時の動作にすることができます。 ではまずcssでアニメーションを使う方法を確認しておきましょう。 cssのアニメーション cssでアニメーションを使う場合、基本的に以下のような記述方法をとります。 .test{ width: 300px; height: 150px; background-color: black; } .test:hover{ animation-name: background-anim; animation-timing-function: ease-in-out; animation-duration: 1s; } @keyframes backgroun
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
CSSスプライトとstepsを使ってアニメーション画像を作ろう
2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move
Responsive Multi-Level Menu | Codrops
A responsive multi-level menu that shows its submenus in their own context, allowing for a space-saving presentation and usage. Today we want to share an experimental drop-down menu with you. The main idea is to save space for menus that have a lot of content and sub-levels. Each sub-level in this menu will be shown in its own context, making the “parent” level disappear. This is done with subtle
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS初心者でも簡単！画像をホバーするとコンテンツをさまざまなアニメーションで表示するスタイルシート -imagehover.css