つい先日アニメーションする雲を見たのですが、それはそれはなんともリアルな雲だったのですが、今日はそれとはまた違って可愛らしい雲を紹介したいと思います。
なんともポカポカ陽気な雰囲気がとても可愛らしいです。
では、早速ご紹介
Moving Clouds Animation

デモ/コード :Moving Clouds Animation
動きのほうは、上記のデモを見ていただくとして。 なんともゆったりと流れていく雲がホンワカしてきて和みます。
どのように出来てるのかなぁとじっくりとコードを見てみると @keyframesを使用してアニメーションを実現しています。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
@-webkit-keyframes move { 0% {left: 0px;} 49% {left: 940px; opacity: 1;} 50% {left: 940px; opacity: 0;} 51% {left: -940px; opacity: 0;} 52% {left: -940px; opacity: 1;} 100% {left: 0px;} } @-webkit-keyframes backup { 0% {left: -940px;} 100% {left: 940px;} } @-moz-keyframes move { 0% {left: 0px;} 49% {left: 940px; opacity: 1;} 50% {left: 940px; opacity: 0;} 51% {left: -940px; opacity: 0;} 52% {left: -940px; opacity: 1;} 100% {left: 0px;} } @-moz-keyframes backup { 0% {left: -940px;} 100% {left: 940px;} } @-ms-keyframes move { 0% {left: 0px;} 49% {left: 940px; opacity: 1;} 50% {left: 940px; opacity: 0;} 51% {left: -940px; opacity: 0;} 52% {left: -940px; opacity: 1;} 100% {left: 0px;} } @-ms-keyframes backup { 0% {left: -940px;} 100% {left: 940px;} } |
もっとホンワカな雰囲気を出してみたかったので、色を変えただけですがサンプル作ってみました。
対応ブラウザ
Google Chrome / Safari 5+/ Firefox 5+/ Opera 11+/ InternetExplorer 10
@keyframes
サポートしているブラウザは以下です。
- Firefox 5 +
- IE 10 +
- Chrome 6 +
- Safari 5 +
基本的な構文
すべてのベンダー接頭辞を使用する必要があります。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 |
@-webkit-keyframes ANIMATION-NAME { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes ANIMATION-NAME { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes ANIMATION-NAME { 0% { opacity: 0; } 100% { opacity: 1; } } |
もっと詳しく知りたい方はこちらをご覧ください。
W3C :W3C Editer’s Draft
MOZILLA :Mozilla Developer Network