アニメーションがステキなおしゃれすぎるCSSボタンデザイン サイトの引き立て役はコレ！ おしゃれすぎる背景をコピペで実装 【 HTML/CSS 】 おしゃれデザインのログインフォーム！ コピペで差が付くデザインをCSSで 個性的なスゴイ背景を つい先日 アニメーションする雲 を見たのですが、それはそれはなんともリアルな雲だったのですが、今日はそれとはまた違って可愛らしい雲を紹介したいと思います。 もっとホンワカな雰囲気を出してみたかったので、色を変えただけ jQloudsというjQueryプラグインを使えば、ふわふわした雲を実装することができます。風で雲が流れるようなアニメーションをつけることもできるので、動きのある可愛い雲を表示させたい時に役立ちますね。以下は使い方です。 jQueryを使って実装する方法が過去には一般的でしたが、フェードインだけであればCSSだけで実装が可能です。現在このページもそのCSSが適用されていますので、ポワーンとフェードインでページが表示がされたと思います。 流線アニメーション背景CSS See the Pen Background Effect by osorina irina on . CSSアニメーションの種類と違い 7．アニメーション CSSアニメーションの種類と違いを簡易的ながら書いておきます。 animation ループ有り ページ表示後 即可動 transform ループ無し 変形（移動・拡大・回転・傾斜・遠近）が可能 animation-iteration-countプロパティは、要素にキーフレームアニメーションを適用する場合に、アニメーションの繰り返し回数を指定する際に使用します。 初期値は1でアニメーションが開始から終了まで一回再生されます。 きらめく星と動く雲のアニメーション背景CSS See the Pen pure CSS twinkling stars background by Anastasia Goodwin (@agoodwin) on CodePen.