CSS Animated Weather icons

Developer
Size
5,145 Kb
Views
16,192

How do I make an css animated weather icons?

Subtle css animation for Weather iconsCredit Forecast font http://forecastfont.iconvau.lt/. What is a css animated weather icons? How do you make a css animated weather icons? This script and codes were developed by Nick Nikolov on 17 October 2022, Monday.

CSS Animated Weather icons Previews

CSS Animated Weather icons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Animated Weather icons</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @keyframes animateSunRays{ 0%{transform:scale(.8)} 100%{transform: scale(1)}
}
@keyframes animateSunRotate{	0%{transform:rotate(0deg);}	100%{transform: rotate(360deg)}
}
@keyframes animateCloud{ 0%{transform: translate(-5%,0)} 100%{transform: translate(5%,0)}
}
@keyframes animateDropLarge{ 0%{transform:scale(0.3);transform-origin: center center} 50%{transform:scale(1)} 100%{transform: scale(0.3)}
}
.cloud{	fill:rgb(204, 204, 204);	/*-webkit-animation-name: animateCloud;*/ -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;
}
.cloud-dark{	fill:#000;
}
.drop{	fill:#82b2e4;
transform-origin: center center;	animation-name: animateDropLarge;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-timing-function: normal;
animation-direction: normal;
}
.drop:nth-child(2n+1){
animation-delay: 0.2s;
}
.drop:nth-child(2n){
animation-delay: 0.1s;
}
.drop:nth-child(3n){
animation-delay: 0.3s;
}
.sun,
.sun-partial{ fill:rgb(255, 165, 0);
}
.sun{ transform-origin: center center; animation-name: animateSunRotate; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: normal;
}
.sun .rays path,
.sun-partial .rays path{ transform-origin: center center; animation-name: animateSunRays; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate;
}
.sun .rays path:nth-child(2n){ animation-delay: 0.6s;
}
.sun .rays path:nth-child(2n+1){ animation-delay: 0.2s;
}
.sun .rays path:nth-child(3n){ animation-delay: 0.4s;
}
.sun .rays path:nth-child(3n+1){ animation-delay: 0.8s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrapper"> <svg width="40" height="40"> <g id="g3025" class="sun"> <path class="circle" inkscape:connector-curvature="0" id="path3011" d="m 20,10.9375 c -2.50001,3e-5 -4.63543,0.88544 -6.40625,2.65625 -1.77084,1.77086 -2.65626,3.90627 -2.65625,6.40625 -10e-6,2.50002 0.88541,4.63543 2.65625,6.40625 1.77082,1.77084 3.90624,2.65626 6.40625,2.65625 2.49998,10e-6 4.6354,-0.88541 6.40625,-2.65625 C 28.17706,24.63543 29.06247,22.50002 29.0625,20 29.06247,17.50002 28.17706,15.36461 26.40625,13.59375 24.6354,11.82294 22.49998,10.93753 20,10.9375 z m 0,2.09375 c 1.92707,2e-5 3.58331,0.6771 4.9375,2.03125 1.35414,1.35418 1.99997,3.01044 2,4.9375 -3e-5,1.9271 -0.64586,3.58334 -2,4.9375 -1.35419,1.35417 -3.01043,2.00001 -4.9375,2 -1.9271,10e-6 -3.58335,-0.64583 -4.9375,-2 C 13.70832,23.58334 13.03124,21.9271 13.03125,20 13.03124,18.07294 13.70832,16.41668 15.0625,15.0625 16.41665,13.70835 18.0729,13.03127 20,13.03125 z" /> <g class="rays" id="g3015"> <path inkscape:connector-curvature="0" d="m 18.984375,7.968745 0,-2.96875 c -2e-5,-0.26038 0.10415,-0.49476 0.3125,-0.70312 0.20831,-0.2083 0.44269,-0.31247 0.70312,-0.3125 0.2604,3e-5 0.49477,0.1042 0.70313,0.3125 0.20831,0.20836 0.31248,0.44274 0.3125,0.70312 l 0,2.96875 c -2e-5,0.31253 -0.10419,0.55993 -0.3125,0.74219 -0.20836,0.18232 -0.44273,0.27347 -0.70313,0.27344 -0.26043,3e-5 -0.49481,-0.0911 -0.70312,-0.27344 -0.20835,-0.18226 -0.31252,-0.42966 -0.3125,-0.74219 z" id="path3007" /> <path inkscape:connector-curvature="0" d="m 29.218745,12.187495 c -0.46878,0.46878 -0.95055,0.46878 -1.44531,0 -0.49482,-0.46872 -0.4818,-0.93747 0.0391,-1.40625 l 2.10938,-2.10937 c 0.46872,-0.46872 0.93747,-0.46872 1.40625,0 0.46872,0.46878 0.46872,0.93752 0,1.40625 l -2.10938,2.10937 z" id="path2999" /> <path inkscape:connector-curvature="0" d="m 35.703125,19.296875 c 0.2083,0.20835 0.31246,0.44272 0.3125,0.70312 -4e-5,0.26044 -0.1042,0.49481 -0.3125,0.70313 -0.20837,0.20835 -0.44274,0.31251 -0.70313,0.3125 l -2.96875,0 c -0.31253,10e-6 -0.55992,-0.10415 -0.74218,-0.3125 -0.18233,-0.20832 -0.27347,-0.44269 -0.27344,-0.70313 -3e-5,-0.2604 0.0911,-0.49477 0.27344,-0.70312 0.18226,-0.20832 0.42965,-0.31248 0.74218,-0.3125 l 2.96875,0 c 0.26039,2e-5 0.49476,0.10418 0.70313,0.3125 z" id="path3005" /> <path inkscape:connector-curvature="0" d="m 31.328125,29.921875 c 0.46872,0.46875 0.46872,0.9375 0,1.40625 -0.46878,0.46875 -0.93753,0.46875 -1.40625,0 l -2.10938,-2.10938 c -0.52086,-0.46874 -0.53388,-0.95051 -0.0391,-1.44531 0.49476,-0.49478 0.97653,-0.48176 1.44531,0.0391 z" id="path2997" /> <path inkscape:connector-curvature="0" d="m 21.015625,32.031245 0,2.96875 c -2e-5,0.26042 -0.10419,0.4948 -0.3125,0.70313 -0.20836,0.20833 -0.44273,0.3125 -0.70313,0.3125 -0.26043,0 -0.49481,-0.10417 -0.70312,-0.3125 -0.20835,-0.20833 -0.31252,-0.44271 -0.3125,-0.70313 l 0,-2.96875 c -2e-5,-0.31249 0.10415,-0.55989 0.3125,-0.74218 0.20831,-0.18229 0.44269,-0.27344 0.70312,-0.27344 0.2604,0 0.49477,0.0912 0.70313,0.27344 0.20831,0.18229 0.31248,0.42969 0.3125,0.74218 z" id="path3003" /> <path inkscape:connector-curvature="0" d="m 10.781245,27.812495 c 0.46874,-0.46874 0.95051,-0.46874 1.44532,0 0.49478,0.46876 0.48175,0.93751 -0.0391,1.40625 l -2.10937,2.10938 c -0.46876,0.46875 -0.93751,0.46875 -1.40625,0 -0.46876,-0.46875 -0.46876,-0.9375 0,-1.40625 l 2.10937,-2.10938 z" id="path2995" /> <path inkscape:connector-curvature="0" d="m 7.968745,21.015625 -2.96875,0 c -0.26042,10e-6 -0.49479,-0.10415 -0.70312,-0.3125 -0.20834,-0.20832 -0.31251,-0.44269 -0.3125,-0.70313 -1e-5,-0.2604 0.10416,-0.49477 0.3125,-0.70312 0.20833,-0.20832 0.4427,-0.31248 0.70312,-0.3125 l 2.96875,0 c 0.3125,2e-5 0.55989,0.10418 0.74219,0.3125 0.18228,0.20835 0.27343,0.44272 0.27344,0.70312 -10e-6,0.26044 -0.0912,0.49481 -0.27344,0.70313 -0.1823,0.20835 -0.42969,0.31251 -0.74219,0.3125 z" id="path3001" /> <path inkscape:connector-curvature="0" d="m 8.671875,10.078125 c -0.46876,-0.46873 -0.46876,-0.93747 0,-1.40625 0.46874,-0.46872 0.93749,-0.46872 1.40625,0 l 2.10937,2.10937 c 0.52082,0.46878 0.53385,0.93753 0.0391,1.40625 -0.49481,0.46878 -0.97658,0.46878 -1.44532,0 z" id="path3040" /> </g> </g> </svg>
</div>
<div class="wrapper"> <svg> <path inkscape:connector-curvature="0" id="path2994" d="m 33.627332,20.130225 c -3e-5,1.35418 -0.46878,2.50001 -1.40625,3.4375 -0.93753,0.93751 -2.05732,1.40626 -3.35937,1.40625 -0.1042,10e-6 -0.20837,10e-6 -0.3125,0 l -1.79688,0 c -3e-5,10e-6 -0.0131,10e-6 -0.0391,0 -0.0261,10e-6 -0.0651,10e-6 -0.11719,0 l 0,0 c -0.46877,-0.10416 -0.70315,-0.36458 -0.70312,-0.78125 -3e-5,-0.26041 0.0781,-0.46874 0.23437,-0.625 0.15623,-0.15624 0.33852,-0.23437 0.54688,-0.23437 l 0.0781,0 1.875,0 c 0.10414,0 0.18226,0 0.23438,0 0.8333,0 1.56247,-0.3125 2.1875,-0.9375 0.62496,-0.625 0.93746,-1.3802 0.9375,-2.26563 -4e-5,-0.72916 -0.23441,-1.39322 -0.70313,-1.99219 -0.46878,-0.59894 -1.09378,-0.97655 -1.875,-1.13281 l -0.70312,-0.0781 0.0781,-0.78125 c 0.0521,-0.26041 0.0781,-0.52082 0.0781,-0.78125 -3e-5,-2.18749 -0.78128,-4.06249 -2.34375,-5.6250003 -1.56253,-1.5624807 -3.46357,-2.3437307 -5.70313,-2.3437507 -1.77085,2e-5 -3.37241,0.53387 -4.80469,1.6015603 -1.4323,1.0677307 -2.38282,2.4609507 -2.85156,4.1796907 l -0.15625,0.54687 -0.54687,0.0781 c -1.25001,0.10418 -2.291679,0.61199 -3.1249996,1.52343 -0.83335,0.91148 -1.25001,1.9922 -1.25,3.24219 -1e-5,1.04168 0.31249,1.9922 0.9375,2.85156 0.62499,0.85939 1.4322806,1.44532 2.4218696,1.75782 0.46874,0.0521 0.70311,0.3125 0.70313,0.78125 -2e-5,0.20833 -0.0781,0.39063 -0.23438,0.54687 -0.15626,0.15626 -0.36459,0.23438 -0.625,0.23438 -0.10418,0 -0.20834,-0.026 -0.3125,-0.0781 -1.3020896,-0.36458 -2.3828196,-1.11978 -3.2421896,-2.26562 -0.85938,-1.14583 -1.28907,-2.42187 -1.28906,-3.82813 -10e-6,-1.66665 0.57291,-3.12498 1.71875,-4.375 0.98958,-1.04165 2.1874906,-1.69269 3.5937496,-1.95312 0.67707,-1.92707 1.84895,-3.4895707 3.51563,-4.687501 1.66665,-1.1979 3.5156,-1.7968502 5.54687,-1.7968802 2.65623,3e-5 4.92185,0.9375202 6.79688,2.8125002 1.87497,1.875021 2.81247,4.140641 2.8125,6.796881 -3e-5,0.10418 -3e-5,0.1823 0,0.23437 0.93746,0.3646 1.70569,0.96356 2.30468,1.79688 0.59893,0.83334 0.89841,1.7448 0.89844,2.73437 z" class="cloud" /> <g id="g3030" class="drops"> <path d="m 15.728456,28.946089 c -0.59897,0.13021 -1.14584,0.0391 -1.64062,-0.27344 -0.49481,-0.31249 -0.82033,-0.7552 -0.97656,-1.32812 -0.15627,-0.57291 -0.0781,-1.11979 0.23437,-1.64063 0.41665,-0.67707 1.15884,-1.4453 2.22656,-2.30468 1.0677,-0.85937 1.83592,-1.15885 2.30469,-0.89844 0.36457,0.46876 0.41665,1.32813 0.15625,2.57812 -0.26043,1.25001 -0.57293,2.21355 -0.9375,2.89063 -0.31252,0.52084 -0.76824,0.84636 -1.36719,0.97656 z" id="path3001" inkscape:connector-curvature="0" class="drop" /> <path d="m 23.814396,21.016399 c 0.41664,0.46876 0.49477,1.32814 0.23438,2.57813 -0.26044,1.25001 -0.59899,2.21355 -1.01563,2.89062 -0.31252,0.52084 -0.75523,0.84636 -1.32812,0.97657 -0.57294,0.13021 -1.11982,0.0391 -1.64063,-0.27344 -0.52085,-0.3125 -0.84637,-0.7552 -0.97656,-1.32813 -0.13023,-0.57291 -0.0391,-1.11978 0.27344,-1.64062 0.41664,-0.67708 1.14581,-1.4453 2.1875,-2.30469 1.04164,-0.85936 1.79685,-1.15884 2.26562,-0.89844 z" id="path2999" inkscape:connector-curvature="0" class="drop" /> <path d="m 20.064396,28.047649 c 0.41665,0.46876 0.49477,1.32813 0.23438,2.57813 -0.26044,1.25 -0.59898,2.21354 -1.01563,2.89062 -0.31252,0.52084 -0.75523,0.85938 -1.32812,1.01563 -0.57294,0.15625 -1.11981,0.0781 -1.64063,-0.23438 -0.52085,-0.3125 -0.85939,-0.76823 -1.01562,-1.36718 -0.15627,-0.59896 -0.0781,-1.15886 0.23437,-1.67969 0.41665,-0.625 1.15884,-1.38021 2.22656,-2.26563 1.06769,-0.88541 1.83592,-1.19791 2.30469,-0.9375 z" id="path2995" inkscape:connector-curvature="0" class="drop" /> </g> </svg>
</div>
</body>
</html>

CSS Animated Weather icons - Script Codes CSS Codes

@keyframes animateSunRays{ 0%{transform:scale(.8)} 100%{transform: scale(1)}
}
@keyframes animateSunRotate{	0%{transform:rotate(0deg);}	100%{transform: rotate(360deg)}
}
@keyframes animateCloud{ 0%{transform: translate(-5%,0)} 100%{transform: translate(5%,0)}
}
@keyframes animateDropLarge{ 0%{transform:scale(0.3);transform-origin: center center} 50%{transform:scale(1)} 100%{transform: scale(0.3)}
}
.cloud{	fill:rgb(204, 204, 204);	/*-webkit-animation-name: animateCloud;*/ -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;
}
.cloud-dark{	fill:#000;
}
.drop{	fill:#82b2e4;
transform-origin: center center;	animation-name: animateDropLarge;
animation-duration: 0.4s;
animation-iteration-count: infinite;
animation-timing-function: normal;
animation-direction: normal;
}
.drop:nth-child(2n+1){
animation-delay: 0.2s;
}
.drop:nth-child(2n){
animation-delay: 0.1s;
}
.drop:nth-child(3n){
animation-delay: 0.3s;
}
.sun,
.sun-partial{ fill:rgb(255, 165, 0);
}
.sun{ transform-origin: center center; animation-name: animateSunRotate; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; animation-direction: normal;
}
.sun .rays path,
.sun-partial .rays path{ transform-origin: center center; animation-name: animateSunRays; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-direction: alternate;
}
.sun .rays path:nth-child(2n){ animation-delay: 0.6s;
}
.sun .rays path:nth-child(2n+1){ animation-delay: 0.2s;
}
.sun .rays path:nth-child(3n){ animation-delay: 0.4s;
}
.sun .rays path:nth-child(3n+1){ animation-delay: 0.8s;
}
CSS Animated Weather icons - Script Codes
CSS Animated Weather icons - Script Codes
Home Page Home
Developer Nick Nikolov
Username necks
Uploaded October 17, 2022
Rating 3
Size 5,145 Kb
Views 16,192
Do you need developer help for CSS Animated Weather icons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Nikolov (necks) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!