Sun Animation

Developer
Benedikte Vanderweeën
Size
1,879 Kb
Views
2,024
  1. Sun Animation Previews
  2. Sun Animation HTML Codes
  3. Sun Animation CSS Codes

How do I make an sun animation?

SUN svg animation with CSS. What is a sun animation? How do you make a sun animation? This script and codes were developed by Benedikte Vanderweeën on 21 January 2023, Saturday.

Sun Animation Previews
IQ Test

Sun Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sun Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-sun">
<svg class="svg-sun" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
<circle cx="50" cy="50" r="35" id="sun"></circle>
</svg>
</div>
</body>
</html>

Sun Animation - Script Codes CSS Codes

body{ background-color: #2980b9;
}
.container-sun{ text-align:center;
}
/* the svg element */
.svg-sun{ width:300px; height:300px; -webkit-transform-origin: center center; -moz-transform-origin: 50% 50%; -o-transform-origin: center center; -ms-transform-origin: center center; transform-origin:50% 50%;
-webkit-animation: spin 25s linear infinite, sun-glow 3s 0s linear infinite;
-moz-animation: spin 25s linear infinite, sun-glow 3s 0s linear infinite;
-o-animation:spin 25s linear infinite, sun-glow 3s 0s linear infinite;
-ms-animation: spin 25s linear infinite, sun-glow 3s 0s ease-in-out infinite;
animation: spin 25s linear infinite,sun-glow 3s 0s linear infinite;
}
/* the circle element in the svg itself */
#sun{ stroke-width:18; stroke-dasharray:2; stroke-dashoffset:2;
}
/* animation for the sun glowing effect */
@-webkit-keyframes sun-glow {	0% { fill: #f1c40f; stroke:#f1c40f;}	50% { fill: #e67e22; stroke:#e67e22;}	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@-moz-keyframes sun-glow {	0% { fill: #f1c40f; stroke:#f1c40f;}	50% { fill: #e67e22; stroke:#e67e22;}	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@-o-keyframes sun-glow {	0% { fill: #f1c40f; stroke:#f1c40f;}	50% { fill: #e67e22; stroke:#e67e22;}	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@-ms-keyframes sun-glow {	0% { fill: #f1c40f; stroke:#f1c40f;}	50% { fill: #e67e22; stroke:#e67e22;}	100% { fill: #f1c40f; stroke:#f1c40f;}
}
@keyframes sun-glow {	0% { fill: #f1c40f; stroke:#f1c40f;}	50% { fill: #e67e22; stroke:#e67e22;}	100% { fill: #f1c40f; stroke:#f1c40f;}
}
/* start spin animation */
@-webkit-keyframes spin{	100% {	-webkit-transform: rotate(360deg);	}
}
@-moz-keyframes spin{	100% {	-moz-transform: rotate(360deg);	}
}
@-o-keyframes spin{	100% {	-o-transform: rotate(360deg);	}
}
@-ms-keyframes spin{	100% {	-ms-transform: rotate(360deg);	}
}
@keyframes spin{	100% {	transform: rotate(360deg);	}
}
Sun Animation - Script Codes
Sun Animation - Script Codes
Home Page Home
Developer Benedikte Vanderweeën
Username Benedikte
Uploaded January 21, 2023
Rating 3.5
Size 1,879 Kb
Views 2,024
Do you need developer help for Sun Animation?

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!

Benedikte Vanderweeën (Benedikte) Script Codes
Name
Pure CSS One Div Weather Animated Icons
Donut graph animation
Scaled Paper icon
Rotating earth with people
Transparent SVG pattern
Europe
Background SVG Gradients
Illustrio interface
Swimming fish
SVG Logo
Create amazing captions 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!