Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
SVG animation
<div class="stage">
<svg class="thunder-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path d="M400, 64 c 5.3, 0-10.6, 0.4, 15.8, 1.1 C354.3, 24.4, 307.2, 0256, 0 s - 98.3, 24.4-128.2, 65.1 c - 5.2-0.8-10.5-1.1-15.8-1.1 ,0,114.2 C50.2, 64, 0176 s50.2, 112112112 c13.7, 0,27.1-2.5, 39.7 7.3 c12.3, 10.7, 26.2, 19,40.9 l24.9 25.4 to 24.9 C - 23.5-7.6-44.2-21.3-59.6-39.9 - c - 13,9.2-28.8, 14.7, 45.9, 14.7-44.2 c, 0-80-35.8-80-80 s35. 8-80-80 c10. 8,0,21.1, 2.2, 30.4, 6.1 C163.7, 60.7, 206.3, 32256, 32 s92.3, 28.7, 113.5, 70.1 c9.4-3.9, 19.7, 6.1, 30.5 6.1 c44.2, 0,80,35.8, 80 s - 35.8, 80-80 C - 17.1, 0-32.9-5.5-45.9-14.7 - c - 10.4, 12.5, 23.3, 22.7, 37.6, 30.6, L303 c20.9 312.2-6.6, 40.5-16.9, 57.3 31.6 c12.6, 4.8, 26,7.3, 39.7, 7 3 c61.8, 0112-50.2, 112-112 - s461. 8,64,400,64 z" />
<polygon class="bolt" points="192,352 224,384 192,480 288,384 256,352 288,256" />
</svg>
<svg class="rain-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path class="raindrop-one" d="M96, 384 c0, 17.7, 14.3, 32,32,32 s32-14.3, 32-32-32-64 - s - 64 s96, 366.3, 96384 z" />
<path class="raindrop-two" d="M225, 480 c0, 17.7, 14.3, 32,32,32 s32-14.3, 32-32-32-64 - s - 64 s225, 462.3, 225480 z" />
<path class="raindrop-three" d="M352, 448 c0, 17.7, 14.3, 32,32,32 s32-14.3, 32-32-32-64 - s - 64 s352, 430.3, 352448 z" />
<path d="M400, 64 c 5.3, 0-10.6, 0.4, 15.8, 1.1 C354.3, 24.4, 307.2, 0256, 0 s - 98.3, 24.4-128.2, 65.1 c - 5.2-0.8-10.5-1.1-15.8-1.1 ,0,114.2 C50.2, 64, 0176 s50.2, 112112112 c13.7, 0,27.1-2.5, 39.7-7.3 c29, 25.2, 65.8, 39.3, 104.3, 39.3 c38.5, 0,75.3-14.1, 104.3-39. 3 c12.6, 4.8, 26,7.3, 39.7, 7.3 c61.8, 0112-50.2, 112-112 - s461. 8,64,400,64 z M400, 256-17.1 - c, 0-32.9-5.5-45.9-14.7 C330.6, 269.6, 295.6, 39.6, 288256288 c 0-74.6-18.4-98.1-46.7 - c - 13,9.2-28.8, 14.7, 45.9, 14.7-44.2 c, 0-80-35.8-80-80 s35. 8-80 - 80 ,21.1 c10.8, 0, 2.2, 30.4, 6.1 C163.7, 60.7, 206.3, 32256, 32 s92.3, 28.7, 113.5, 70.1 c9.4-3.9, 19.7-6.1, 30.5 6.1 c44.2, 0,80,35.8, 80 S444.2, 256400256 z" />
</svg>
<svg class="snow-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path d="M512, 176 c0-61.8-50.2-112-112-112 - c - 5.3, 0-10.6, 0.4, 15.8, 1.1 C354.3, 24.4, 307.2, 0256, 0 s - 98.3, 24.4-128.2, 65.1 C - 5.2-0.8-10.5-1.1-15.8-1.1 C50.2, 64,0,114.2, 0176 s50.2, 112112112 c13.7, 0,27.1-2.5, 39.7-7.3 c29, 25.2, 65.8, 39.3, 104.3, 39.3 ,75.3 c38.5, 0-14.1, 104.3-39.3 c12.6, 4.8, 26,7.3, 39.7, 7.3 C461.8, 288512237.8, 512176 z C330.6 M354.1, 241.3, 269.6, 295.6, 288256288 C - 39.6, 0-74.6-18.4-98.1-46.7 - c - 13,9.2-28.8, 14.7, 45.9, 14.7-44.2 c, 0-80-35.8-80-80 s35. 8-80-80 c10. 8,0,21.1, 2.2, 30.4, 6.1 C163.7, 60.7, 206.3, 32256, 32 s92.3, 28.7, 113.5, 70.1 c9.4-3.9, 19.7, 6.1, 30.5 6.1 c44.2, 0,80,35.8, 80 s - 35.8, 80-80 C382.9, 256367 2 PCT, 250.5, 354.1, 241.3 z" />
<path class="snowflake-one" d="M131.8, 349.9 c - 1.5-5.6-7.3-8.9-12.9-7.4 l - 11.9, 3.2 c - 1.1-1.5-2.2-3-3.6-4.4 - c - 1.4-1.4-2.9-2.6-4.5-3.6 l3.2-11.9 C1.5-5.6-1.8-11.4-7.4-12.9 - c - 5.6-1.5-11.4, 1.8, 12.9, 7.4 l - 3.2, 12.1-3.8 c, 0.3-7.5, 1.2, 10.9, 2.9 l - 8.8-8.8 - c - 4.1-4.1-10.8-4.1-14. 8, 0 C - 4.1, 4.1-4.1, 10.8, 0,14.9 l8.8, c - 1.6-8.8, 3.5-2.6, 7.2, 2.9, 11 12,3.2 l - c - 5.6-1.5-9,7.2-7.5, c1.5 12.9, 5.6, 7.3, 8.9, 12.9, 7.4 l11.9 - 3.2 C1.1, 1.6, 2.2, 3.1, 3.7, 4.5 c1.4, 1.4, 2.9, 2.6, 4.4, 3.6 l - 3.2, 11.9 c to 1.5, 5.6, 1.8, 11.4, 7.4, 12.9 c5.6, 1.5, 11.3, 1.8, 12.8-7.4 l3.2-12 C3.8-0.3, 7.5-1.3, 11-2.9 l8.8 c4.1 8.8, 4.1, 10.7, 4,14.8, 0 c4. 1-4.1, 4.1-10.7, 0-14.8 l - 8.8-8.8 c1.7-3.5, 2.7-7.2, 2.9-11 l12. 1-3.2 C130, 361.3, 133.3, 355.6, 131.8, 349.9 z M88.6, 371 c - 4.1, 4.1, 10.8, 4.1-14.9, 0 c - 4.1-4.1-4.1-10.8, c4.1 0-14.8-4.1, 10.8-4.1, 14.9, 0 S92.6, 366.9, 88.6, 371 z" />
<path class="snowflake-two" d="M304.8, 437.6 l - 12.6-7.2 c0.4-2.2, 0.7, 4.4, 0.7-6.7 c0-2.3-0.3-4.5-0.7-6.7 c5.9 l12.6-7.2-3.4, 11,4.5-7.9-16.8 C - 3.4-5.9-10.9-7.9-16.8-4.5 l - 12.7, 7.3, 2.9-7.2 - c - 3.4-5.2-11.5-6.7 v - 14.6 - c0-6.8-5.5-12.3-12.3-12.3 - s - 12.3, 5.5-12.3, 12.3 V389 C - 4.3, 1.5-8.1, 3.8-11.5, 6.7 l - 12.7-7.3 - c - 5.9-3.4-13.5-1.4-16.9, 4.5-3.4 c, 5.9-1.4, 13.4, 4.5, 16.8 l12.5, c - 0.4-7.2, 2.2-0.7, 4.4 to 0.7 C0, 6.7, 2.3, 0.3, 4.5, 0.7, 6.7 l - 12.5, 7.2-5.9 c, 3.4-7.9, 11-4.5, s10.9 16.9, 7.9, 16.8, 4.5 c3.4 l12.7-7.3, 2.9, 7.2, 5.1, 11.5, 6.7 V473 C0, 6.8, 5.5, 12.3, 12.3, 12.3 s12.3-5.5, 14.6, 1.5 c4.3-12.3-12.3 v - 8.2-3.8, 11.5-6.7 l12.7 c5.9 7.3, 3.4, 13.4, 1.4, 16.8 to 4.5 C312.8, 448.6, 310.7, 441.1, 304.8, 437.6 z M256, 436 c 6.8, 0-12.3-5.5-12.3-12.3 c0-6.8, 5.5, 12.3, 12.3 12.3 s12.3, 5.5, 12.3, 12.3 C268.3, 430.5, 262.8, 436256436 z" />
<path class="snowflake-three" d="M474.2, 396.2 l - 12.1-3.2 - c - 0.3-3.8-1.2-7.5-2.9-11 l8. C4.1 8-8.8-4.1, 4.1-10.8, 0-14.9 - c - 4.1-4.1-10.7-4.1-14.8, 0 L - 8.8, 8.8-3.5 - c - 1.6-7.1-2.6-11-2.9 l - 3.2-12.1 - c - 1.5-5.6-7.2-8.9-12.9-7.4 - c - 5.6, 1.5-8.9, 7.3-7.4, 12.9 l3.2, 11.9 C - 1.6, 1.1-3.1, 2.3-4.5, 3.7-1.4 c, 1.4-2.5, 2.9, 3.6, 4.5 l - 11.9-3.2 - c - 5.6-1.5-11.4, 1.9-12.9, 7.4 c to 1.5, 5.6, 1.9, 11.4, 7.4, 12.9 l12, 3. C0.3 2, 3.8, 1.3, 7.5, 3, 11 l - 8.8, 8.8-4.1 c, 4.1-4.1, 10.7, 0,14.8 c4.1, 4.1, 10.7, 4.1, 14.8, 0 l8. C3.5 8-8.8, 1.7, 7.2, 2.7, 11, 3 l3.2, 12 C1.5, 5.6, 7.2, 8.9, 12.9, 7.4 c5.6-1.5, 9-7.2, 7.5 to 12.9 l - 3.2-11.9 c1.5-1.1, 3-2.2, 4.5-3.6 c1.4-1.4, 2.5, 2.9, 3.6 4.5 l11.9, 3.2 C5.6, 1.5, 11.4, 1.9, 12.9 7.4 C483.1, 403.5, 479.8, 397.8, 474.2, 396.2 z M438.3, 402.9-4.1 c, 4.1-10.8, 4.1-14.9, 0 c - 4.1-4.1-4.1-10.7, 0-14.9 C4.1-4.1, 10.8-4.1, 14.9, 0 c442. 4392, 442.4, 398.9, 438.3, 402.9 z" />
</svg>
<svg class="sun-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path class="sun-half" d="M127.8 c3.1 259.1-4.3, 6.5-8.4, 10-12.3 - c - 6-11.2-9.4-24-9.4-37.7 c0-44.1, 35.7-79.8, 79.8 to 79.8 ,73.1 c40, 0, 29.4, 78.9, 67.7 c11.4, 2.3, 22.4, 5.7, 32.9, 10.4 c - 0.4-29.2-12-56.6-32.7-77.3 C266.1, 109238,97.4, 208.2, 97.4 C - 29.9, 0-57.9, 11.6-79.1, 32.8-21.1 c, 21.1-32.8, 49.2-32.8, 79.1 c0, 17.2, 3.9, 33.9, 11.2, 48.9 c1.5-0.1, 3-0.1, 4.4 to 0.1 C117.3, 258122.6, 258.4, 127.8, 259.1 z" />
<path class="cloud" d="M400, 256 c 5.3, 0-10.6, 0.4, 15.8, 1.1 39-40.5 - c - 16.8-22.8-64.2-51.7 - c - 10.5-4.6-21.5-8.1-32.9-10.4 C - 10.1-2-20.5-3.1-31.1-3.1 - c - 45.8, 0-88.4, 19.6, 118.2, 52.9-3.5 c, 3.9-6.9, 8-10,12.3 c - 5.2-0.8-10.5-1.1-15.8-1.1 - c - 1.5, 0 to 3, 0-4.4 C47.9, 0.1, 258.4, 0307.7, 0368 c0, 61.8, 50.2, 112112112 c13.7, 0,27.1-2.5, 39.7-7.3 c29, 25.2, 65.8, 39.3, 104.3, 39.3 ,75.3 c38.5, 0-14.1, 104.3-39.3 c12.6, 4.8, 26,7.3, 39.7, 7.3 c61.8, 0112-50.2, 112-112 - s461. 8256400256 z M400, 448 C - 17.1, 0-32.9-5.5-45.9-14.7 C330.6, 461.6, 295.6, 39.6, 480256480 c 0-74.6-18.4-98.1-46.7 - c - 13,9.2-28.8, 14.7-45.9, 14.7 C - 44.2, 0-80-35.8-80-80 s35. 8-80-80 - c7. 8,0,15.4, 1.2, 22.5, 3.3 c2.7, 0.8, 5.4, 1.7 and 8,2.8 c4.5-8.7, 9.9-16.9, 16.2 to 24.4 C182, 241.9, 216.8, 224256224 c10.1,,20,1.2 0, 29.4, 3.5 c10.6, 2.5, 20.7, 6.4, 30.1, 11.4 c23.2, 12.4, 42.1, 31.8, 54.1, 55.2 C9.4-3.9, 19.7-6.1, 30.5-6.1 c44.2, 0,80,35.8, 80 S444.2, 448400448 z" />
<path class="ray ray-one" d="M16, 224 h32c8. 8,0,16-7.2, 16-16 s - 7.2-16-16-16 h16c - 8.8, 0 to 16,7.2-16 16th S7.2, 224,16,224 z" />
<path class="ray ray-two" d="M83.5 c6.3 106.2, 6.2, 16.4, 6.2, 22.6, 0 c6. 3-6.2, 6.3-16.4, 0-22.6 L83.5, 60.9 c - 6.2-6.2-16.4-6.2-22.6, 0 C - 6.2, 6.2-6.2, 16.4, 0,22.6 L83.5, 106.2 z" />
<path class="ray ray-three" d="M208, 64 c8. 8,0,16-7.2, 16-16 v16c0-8.8-7.2-16-16-16 s - 16,7.2-16 16th v32C192, 56.8, 199.2, 64208 (z" />
<path class="ray ray-four" d="M332.4, 106.2 c6.2 l22.6-22.6-6.2, 6.2-16.4, 0-22.6 - c - 6.2-6.2-16.4-6.2-22.6, 0 l - 22.6, 22.6 C - 6.2, 6.2-6.2, 16.4, 0,22.6 S326.2, 112.4, 332.4, 106.2 z" />
<path class="ray ray-five" d="M352, 208 c0, 8.8, 7.2, 16,16,16 h32c8. 8,0,16-7.2, 16-16 s - 7.2-16-16-16 h - 32 c359. 2192352199.2, 352208 z" />
</svg>
<svg class="sunshine" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path class="sun-full" d="M256, 144-61.8 - c, s50.2,50.2 0-112-112112, 112112112 s112-50.2, 112-112 s317. 8144256144 z M256, 336 C - 44.2, 0-80-35.8-80-80 s35. 8-80-80 s80, 35.8, 80, S300.2, 336256336 z" />
<path class="sun-ray-eight" d="M131.6, 357.8 l - 22.6, 22.6-6.2 c, 6.2-6.2, 16.4, 0,22.6 s16.4, 6.2, 22.6, 0 l22. C6.2 6-22.6-6.3, 6.2-16.4, 0-22.6 C147.9, 351.6, 137.8, 351.6, 131.6, 357.8 z" />
<path class="sun-ray-seven" d="M256, 400 c 8.8, 0 to 16,7.2-16th v32c0 16, 8.8, 7.2, 16,16,16 s16-7.2, 16-16 v - 32 c272, 407.2, 264.8, 400256400 z" />
<path class="sun-ray-six" d="M380.5, 357.8 c - 6.3-6.2-16.4-6.2-22.6, 0 c - 6.3, 6.2-6.3, 16.4, 0,22.6 l22.6, c6.2 22.6, 6.2, 16.4, 6.2, 22.6, 0 S6.2-16.4, 0-22.6 L380.5, 357.8 z" />
<path class="sun-ray-five" d="M448, 32 c - 240 - h - 8.8, 0 to 16,7.2-16 16th s7.2, 16,16,16 h32c8. 8,0,16-7.2, 16-16 s456. 8240448240 z" />
<path class="sun-ray-four" d="M380.4, 154.2 c6.2 l22.6-22.6-6.2, 6.2-16.4, 0-22.6 - s - 16.4-6.2-22.6, 0 l - 22.6, 22.6-6.2 c, 6.2-6.2, 16.4, 0,22.6 C364.1, 160.4, 374.2, 160.4, 380.4, 154.2 z" />
<path class="sun-ray-three" d="M256, 112 c8. 8,0,16-7.2, 16-16 v64c0-8.8-7.2-16-16-16 s - 16,7.2-16 16th v32C240, 104.8, 247.2, 112256112 z" />
<path class="sun-ray-two" d="M131.5 c6.3 154.2, 6.2, 16.4, 6.2, 22.6, 0 c6. 3-6.2, 6.3-16.4, 0-22.6 l - 22.6-22.6 - c - 6.2-6.2-16.4-6.2-22.6, 0 C - 6.2, 6.2-6.2, 16.4, 0,22.6 L131.5, 154.2 z" />
<path class="sun-ray-one" d="M112, 256 c0-8.8-7.2-16-16-16 h64c - 8.8, 0 to 16,7.2-16 16th s7.2, 16,16,16 h32C104. 8272112264.8, 112256 z" />
</svg>
<svg class="windy-cloud" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<g class="cloud-wrap">
<path class="cloud" d="M417, 166.1 c - 24-24.5-57.1-38.8-91.7-38.8 - c - 34.6, 0-67.7, 14.2, 91.7, 38.8-52.8 c, 2.5 95,99.6,46.2-95 C0, 55,44.7, 99.7, 99.7, 99.7 c5.8, 0,11.6-0.5, 17.3 1.5 c20.7, 13.5, 44.9, 20.9, 69.7, 20.9 c24.9, 0,49.1-7.3, 69.8 to 20.9 ,11.5 c5.7, 1, 1.5, 17.3, 1.5 c54.9, 0,99.6-44.7, and 99.6 99.7 C512, 212.3, 469.8, 168.5, 417166 us z M412.4, 333.3-8.3 c, 0-16.4-1.5-24-4.4 C - 17.5, 15.2-39.8, 23.8-63.1, 23.8-23.2 c, 0-45.5-8.5-63-23.8 - c - 7.6, 2.9-15.8, 24,4.4 c - 4.4-37.3, 0-67.7-30.4-67.7-67.7 C0-37.3, 30.4-67.7, 67.7-67.7 c3.2,6.4 0, 0.2, 9.5, 0.7 c18.1-24.6, 46.5, 39.4, 77.5 39.4 c30.9, 0,59.4, 14.8, 77.5, 39.4 C3.1-0.5, 6.3-0.7, 9.6-0.7 c37.3,67.6 0, 30.4, 67.6, 67.7 C480 and 303449.7, 333.3, 412.4, 333.3 z" />
</g>
<path class="wind-three" d="M144, 352 h16c - 8.8, 0 to 16,7.2-16 16th s7.2, 16,16,16 h128c8. 8,0,16-7.2, 16-16 s152. 8352144352 z" />
<path class="wind-two" d="M16, 320 h94c8. 8,0,16-7.2, 16-16 s - 7.2-16-16-16 h16c - 8.8, 0 to 16,7.2-16 16th S7.2, 320,16,320 z" />
<path class="wind-one" d="M16, 256 h64c8. 8,0,16-7.2, 16-16 s - 7.2-16-16-16 h16c - 8.8, 0 to 16,7.2-16 16th S7.2, 256,16,256 z" />
</svg>
</div>
Copy the codebody {
background: # 121212;
}
.stage {
position: absolute;
top: 50%;
left: 50%;
width: 600px;
height: 96px;
margin-left: -300px;
margin-top: -30px;
}
svg {
width: 48px;
height: 48px;
margin: 24px 0 0 40px;
fill: #fff;
}
/* Thunder Bolt Animation */
.thunder-cloud .bolt {
animation: flash 2s infinite;
}
@keyframes flash {
0% {
transform: translateY(-25px) translateX(25px) scaleY(0.95);
opacity: 0;
}
5%.25% {
opacity: 1;
}
15%.20% {
opacity: 0;
}
50% {
transform: translateY(8px) translateX(-10px);
opacity: 1;
}
80% {
transform: translateY(8px) translateX(-10px);
opacity: 0;
}
100% {
transform: translateY(-25px) translateX(25px) scaleY(0.95);
opacity: 0; }}/* Raindrops Animation */
.rain-cloud .raindrop-one..rain-cloud .raindrop-two..rain-cloud .raindrop-three {
opacity: 0;
animation-timing-function: cubic-bezier(1.0.1.1);
}
.rain-cloud .raindrop-one {
animation: falling-drop-one 2s infinite;
}
.rain-cloud .raindrop-two {
animation: falling-drop-two 1.90 s infinite;
animation-delay: 0.8 s;
}
.rain-cloud .raindrop-three {
animation: falling-drop-three 1.80 s infinite;
animation-delay: 0.5 s;
}
@keyframes falling-drop-one {
0% {
transform: translateY(-35px);
opacity: 0;
}
10% {
transform: translateY(-15px);
opacity: 1;
}
30% {
opacity: 1;
}
60% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(-35px);
opacity: 0; }}@keyframes falling-drop-two {
0% {
transform: translateY(-105px);
opacity: 0;
}
10% {
transform: translateY(-85px);
opacity: 1;
}
30% {
opacity: 1;
}
60% {
transform: translateY(5px);
opacity: 0;
}
100% {
transform: translateY(-105px);
opacity: 0; }}@keyframes falling-drop-three {
0% {
transform: translateY(-105px);
opacity: 0;
}
10% {
transform: translateY(-85px);
opacity: 1;
}
30% {
opacity: 1;
}
60% {
transform: translateY(35px);
opacity: 0;
}
100% {
transform: translateY(-105px);
opacity: 0; }}/* Snowflake Animations */
.snow-cloud .snowflake-one..snow-cloud .snowflake-two..snow-cloud .snowflake-three {
opacity: 0;
transform-origin: center center;
animation-timing-function: ease-in;
}
.snow-cloud .snowflake-one {
animation: falling-snow-one 4s infinite;
}
.snow-cloud .snowflake-two {
animation: falling-snow-two 3.8 s infinite;
animation-delay: 2.5 s;
}
.snow-cloud .snowflake-three {
animation: falling-snow-three 3.9 s infinite;
animation-delay: 1.5 s;
}
@keyframes falling-snow-one {
0% {
transform: translateY(-65px) rotate(0);
opacity: 0;
}
20% {
transform: translateY(-10px) translateX(30px) rotate(-30deg);
opacity: 1;
}
40% {
transform: translateY(45px) translateX(-30px) rotate(30deg);
}
50% {
opacity: 1;
}
60% {
transform: translateY(100px) translateX(30px) rotate(-30deg);
opacity: 0;
}
100% {
transform: translateY(-65px);
opacity: 0; }}@keyframes falling-snow-two {
0% {
transform: translateY(-75px) rotate(0);
opacity: 0;
}
20% {
transform: translateY(-45px) translateX(40px) rotate(-30deg);
opacity: 1;
}
40% {
transform: translateY(5px) translateX(-40px) rotate(30deg);
}
50% {
opacity: 1;
}
60% {
transform: translateY(30px) translateX(20px) rotate(-30deg);
opacity: 0;
}
100% {
transform: translateY(-75px);
opacity: 0; }}@keyframes falling-snow-three {
0% {
transform: translateY(-85px) rotate(0);
opacity: 0;
}
20% {
transform: translateY(-10px) translateX(-30px) rotate(30deg);
opacity: 1;
}
40% {
transform: translateY(25px) translateX(30px) rotate(-30deg);
}
50% {
opacity: 1;
}
60% {
transform: translateY(60px) translateX(-30px) rotate(30deg);
opacity: 0;
}
100% {
transform: translateY(-85px);
opacity: 0; }}/* Sunny Cloud Animations */
.sun-cloud .sun-half {
animation: sun-grow 4s infinite cubic-bezier(0.2.0.85.0.4.1.5);
transform-origin: bottom center;
}
.sun-cloud .ray-one {
animation: ray-show-one 4s infinite linear;
transform-origin: center right;
}
.sun-cloud .ray-two {
animation: ray-show-two 4s infinite linear;
transform-origin: bottom right;
}
.sun-cloud .ray-three {
animation: ray-show-three 4s infinite linear;
transform-origin: bottom center;
}
.sun-cloud .ray-four {
animation: ray-show-four 4s infinite linear;
transform-origin: bottom left;
}
.sun-cloud .ray-five {
animation: ray-show-five 4s infinite linear;
transform-origin: center left;
}
@keyframes sun-grow {
0%.90%.100% {
transform: scale(0.5);
opacity: 0;
}
15%.80% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-one {
0%.15%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
20%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-two {
0%.20%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
25%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-three {
0%.25%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
30%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-four {
0%.30%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
35%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-five {
0%.35%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
40%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-six {
0%.40%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
45%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-seven {
0%.45%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
50%.70% {
transform: scale(1);
opacity: 1; }}@keyframes ray-show-eight {
0%.50%.80%.100% {
transform: scale(0.5);
opacity: 0;
}
55%.70% {
transform: scale(1);
opacity: 1; }}/* Sunshine Animation */
/* If only using this animation be sure to grab the sun-grow and ray-show-x keyframes set above */
.sunshine .sun-full {
animation: sun-grow 4s infinite cubic-bezier(0.2.0.85.0.4.1.5);
transform-origin: center center;
}
.sunshine .sun-ray-one {
animation: ray-show-one 4s infinite ease-in;
transform-origin: center right;
}
.sunshine .sun-ray-two {
animation: ray-show-two 4s infinite ease-in;
transform-origin: bottom right;
}
.sunshine .sun-ray-three {
animation: ray-show-three 4s infinite ease-in;
transform-origin: bottom center;
}
.sunshine .sun-ray-four {
animation: ray-show-four 4s infinite ease-in;
transform-origin: bottom left;
}
.sunshine .sun-ray-five {
animation: ray-show-five 4s infinite ease-in;
transform-origin: center left;
}
.sunshine .sun-ray-six {
animation: ray-show-six 4s infinite ease-in;
transform-origin: top left;
}
.sunshine .sun-ray-seven {
animation: ray-show-seven 4s infinite ease-in;
transform-origin: top center;
}
.sunshine .sun-ray-eight {
animation: ray-show-eight 4s infinite ease-in;
transform-origin: top right;
}
/* Windy Cloud Animation */
.windy-cloud .cloud-wrap {
animation: bob 2s infinite cubic-bezier(0.0.5.1.5);
}
.windy-cloud .cloud {
animation: cloud-push 4s infinite;
transform-origin: left center;
}
.windy-cloud .wind-one {
animation: wind-slide-one 4s infinite;
}
.windy-cloud .wind-two {
animation: wind-slide-two 4s infinite;
}
.windy-cloud .wind-three {
animation: wind-slide-three 4s infinite;
}
@keyframes bob {
0%.100% {
transform: translateY(10px);
}
50% {
transform: translateY(-10px); }}@keyframes cloud-push {
0%.80%.100% {
transform: translateX(-120px) scale(1.2);
}
10%.60% {
transform: translateX(0) scale(1); }}@keyframes wind-slide-one {
0%.70%.100% {
transform: scaleX(0);
opacity: 0;
}
10%.60% {
transform: scaleX(1);
opacity: 1; }}@keyframes wind-slide-two {
0%.70%.100% {
transform: scaleX(0);
opacity: 0;
}
10%.60% {
transform: scaleX(1);
opacity: 1; }}@keyframes wind-slide-three {
0%.70%.100% {
transform: scaleX(0);
opacity: 0;
}
10%.60% {
transform: scaleX(1);
opacity: 1; }}Copy the code