つい先日アニメーションする雲を見たのですが、それはそれはなんともリアルな雲だったのですが、今日はそれとはまた違って可愛らしい雲を紹介したいと思います。

なんともポカポカ陽気な雰囲気がとても可愛らしいです。

では、早速ご紹介

Moving Clouds Animation

動きのほうは、上記のデモを見ていただくとして。 なんともゆったりと流れていく雲がホンワカしてきて和みます。

どのように出来てるのかなぁとじっくりとコードを見てみると @keyframesを使用してアニメーションを実現しています。

CSS

もっとホンワカな雰囲気を出してみたかったので、色を変えただけですがサンプル作ってみました。

@keyframes

サポートしているブラウザは以下です。

• Firefox 5 +
• IE 10 +
• Chrome 6 +
• Safari 5 +

基本的な構文

すべてのベンダー接頭辞を使用する必要があります。

CSS

もっと詳しく知りたい方はこちらをご覧ください。