CSSだけで作るLoadingアニメーション#3
最近少しだけはまっているCSS-Loaderですが、アニメーション処理はコンテンツ作成者にとってはひとつの面白みがありますね。
今回は、とあるサイトで見かけたloading処理を似せて作って見ました。
イメージは、４つのボールが集約して中央に文字が浮かび上がるループアニメーションです。
サンプルデモ
W
ソースコード
|
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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 |
<!DOCTYPE html> <html> <head> <style> .loading { filter:url(#drop); position:relative; width:100px; height:100px; } .str { z-index:2; position:absolute; text-align:center; line-height:100px; width:100%; height:100%; font-size:40px; color:white; font-weight:bold; animation: anim-str 2s ease-in-out infinite; } .water { z-index:1; position:relative; width:100%; height:100%; animation: anim-water 4s ease-in-out infinite; } .water > div { position:absolute; width:30px; height:30px; border-radius:50%; background-color:#1DA9F1; } .water > div:nth-child(1) { top:0; left:0; animation: anim-water-1 2s ease-in-out infinite; } .water > div:nth-child(2) { top:0; right:0; animation: anim-water-2 2s ease-in-out infinite; } .water > div:nth-child(3) { bottom:0; left:0; animation: anim-water-3 2s ease-in-out infinite; } .water > div:nth-child(4) { bottom:0; right:0; animation: anim-water-4 2s ease-in-out infinite; } @keyframes anim-str { 0%{ opacity:0; } 30%{ opacity:0; } 50%{ opacity:1; } 70%{ opacity:1; } 80%{ opacity:0; } 100%{ opacity:0; } } @keyframes anim-water { 0%{ transform:rotate(0deg); } 25%{ transform:rotate(90deg); } 50%{ transform:rotate(180deg); } 75%{ transform:rotate(270deg); } 100%{ transform:rotate(360deg); } } @keyframes anim-water-1 { 0%{ top:0; left:0; transform:scale(1); } 50%{ top:35px; left:35px; transform:scale(2.5); } 100%{ top:0; left:0; transform:scale(1); } } @keyframes anim-water-2 { 0%{ top:0; right:0; transform:scale(1); } 50%{ top:35px; right:35px; transform:scale(2.5); } 100%{ top:0; right:0; transform:scale(1); } } @keyframes anim-water-3 { 0%{ bottom:0; left:0; transform:scale(1); } 50%{ bottom:35px; left:35px; transform:scale(2.5); } 100%{ bottom:0; left:0; transform:scale(1); } } @keyframes anim-water-4 { 0%{ bottom:0; right:0; transform:scale(1); } 50%{ bottom:35px; right:35px; transform:scale(2.5); } 100%{ bottom:0; right:0; transform:scale(1); } } </style> </head> <body> <h1>CSS Loading-Animation - Water</h1> <div class="loading"> <div class="str">W</div> <div class="water"> <div></div> <div></div> <div></div> <div></div> </div> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="drop"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo"></feColorMatrix> <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite> </filter> </defs> </svg> </div> </body> </html> |
解説
今回は、以前記事で書いた「Drop」のSVGレンダリングを利用しています。
このヌルヌル効果を利用して、４つの玉を階層構造にして、親エレメントに回転を加えています。
末端の玉エレメントは、拡縮効果と、中央に移動する効果を同時に行なっています。
最後に、中央に表示する文字の透明度をアニメーションでコントロールします。
いかがでしたか？読み込みを待っている間、面白みが増すようなアニメーションをたくさん作ってみたいですね。