<div class="scene1">
	<div id="sun" class="sun"></div>
	<div id="sun2" class="sun"></div>
	<div class="sun_afterimages">
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
		<div class="sun_afterimage"></div>
	</div>
</div>

<div class="scene2">
	<svg class ="svg_circle" version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
		 y="0px" width="300px" height="300px" viewBox="0 0 100 100" enable-background="new 0 0 56.69 56.69"
		 xml:space="preserve">
	<circle id="rotate_circle1" fill="transparent" stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="25"/>
	<circle id="rotate_circle2" fill="transparent" stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="35"/>
	<circle id="rotate_circle3" fill="transparent" stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="45"/>
	</svg>
	
	<div id="stick"></div>
</div>
<div class="scene3">
	<div class="circles" id="circles1">
		<div class="circle" style="border-color:#c9af52;"></div>
		<div class="circle" style="border-color:#183c43;"></div>
		<div class="circle" style="border-color:#FF0088;"></div>
		<div class="circle" style="border-color:#7986CB;"></div>
		<div class="circle" style="border-color:#E2E6E9;"></div>
	</div>
</div>
<div class="scene4">
	<div id="slice_circle" class="circle"></div>
</div>

<div class="scene5">
	<div id="circle_squares">
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
		<div class="circle_square"></div>
	</div>
</div>
<div class="scene6">
	<div id="bomb">
		<svg class="tail" version="1.1" id="&#xB808;&#xC774;&#xC5B4;_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			 x="0px" y="0px" width="63.333px" height="30.667px" viewBox="0 0 63.333 30.667"
			 style="enable-background:new 0 0 63.333 30.667;" xml:space="preserve">
		<path d="M3,19.333C3,17.258,9.159,1.416,21,5.667
			c13,4.667,13.167,38.724,39.667,7.39"/>
		</svg>
		<div class="head"></div>
		<div class="body"></div>
	
	</div>
</div>
<div id="text">1</div>
html, body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
		background:skyblue;
		overflow: hidden;
}
.scene6 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sun {
	width: 200px;
	height: 200px;
	top:50%;
	left: 50%;
	margin-left: -100px;
	margin-top:-100px;
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
}
#sun {
/* 	background: #FFE26C; */
	border-color: #FFE26C;
	border-style: solid;
	border-width: 75px;
}
#sun2 {
	border: 75px solid #fff;
}
.sun_afterimage {
	width: 60px;
	height:2px;
	background: #FFE26C;
	top:50%;
	left: 50%;
	position: absolute;
	transform-origin: 0% 1px;
	transform:translate(120px, 0px);
}
#moonbackground {
	background: #96ABC0;	
	top:50%;
	left: 50%;
	width: 1000px;
	height: 1000px;
	margin: -500px 0 0 -500px;
	position: absolute;
	border-radius: 50%;
}


#text {
	top:50%;
	left: 50%;
	width: 100px;
	height: 100px;
	font-size: 100px;
	margin-left:-50px;
	margin-top:-50px;
	position: absolute;
	color: white;
	text-align: center;
	line-height: 100px;
	
	font-family: sans-serif;
}
.circles {
	z-index: 100;
}
.circle {
	width: 150px;
	height: 150px;
	top:50%;
	left: 50%;
	margin-top:-75px;
	margin-left:-75px;
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
	border: 75px solid transparent;
}


.svg_circle {
	top:50%;
	left: 50%;
	width: 300px;
	height: 300px;
	font-size: 100px;
	margin-left:-150px;
	margin-top:-150px;
	position: absolute;
}
.svg_circle circle{
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-dasharray: 0 1000;
  stroke-dashoffset: 1;
  
  stroke: #ff8c3a;
}
.svg_circle circle#rotate_circle2 {
	stroke-width: 2;
  stroke: #3AA1BF;
}
.svg_circle circle#rotate_circle3 {
	stroke-width: 1;
  stroke: white;
}
#stick {
	position: absolute;
	top:50%;
	left: 50%;
	height: 0;
	margin-left: -17px;
	width: 24px;
	border-bottom: 150px solid #E5EBF7;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	transform-origin: 50% 0%;
}

#slice_circle {
	background: #ea6b96;
	
}
.circle_square {
	width: 20px;
	height: 20px;
	top:50%;
	left: 50%;
	margin-top:-10px;
	margin-left:-10px;
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
	background: #FFDDDD;
}

#bomb {
	position: absolute;
	width: 200px;
	height: 200px;
	top:50%;
	left: 50%;
	margin-left:-100px;
	margin-top:-100px;
	stroke-dasharray: 100 1000;
	stroke-dashoffset: 0;
	transform: rotate(20deg);
}
#bomb .tail {
	position: absolute;
	left: 50%;
	top:-110px;
	width: 200px;
	height: 200px;
	margin-left: -10px;
}
#bomb .tail path {
	stroke-width: 3px;
	fill:none;stroke:#000000;stroke-miterlimit:10;
}
#bomb .head {
	position: absolute;
	width: 80px;
	height: 20px;
	left: 50%;
	margin-left: -40px;
	top:-10px;
	background: #000;
	
}
#bomb .body{
	position: absolute;
	top:0;
	width: 200px;
	height: 200px;
	background: #000;
	border-radius: 50%;
}
const ease = [0.42, 0, 0.58, 1];
const customTimingFunction = [0.48, 0.01, 0.25, 1];
const scene1 = new Scene({
	"#sun" : {
		0 : {"border-width" : "100px", "transform" : "scale(0, 0)"},
		1 : {"border-width" : "0px", "transform" : "scale(1, 1)"}
	},
	"#sun2" : {
		0 : {"transform" : "scale(0, 0)", "border-width" : "100px"},
		0.9 : {"transform": "scale(0.9, 0.9)", "border-width": "0px"}
	}
}, {
	easing : customTimingFunction,
	selector: true,
	playSpeed: 1,
});


for (let i = 1; i <= 8; ++i) {
	scene1.newItem(`.sun_afterimage:nth-child(${i})`, {
		easing : customTimingFunction,
		selector: true
	}).set({
		0 : {transform : {rotate: i * 45 + "deg", translate : "40px, 0px", scale : "0,1"}, width: "120px"},
		1.8 : {transform : {translate : "140px, 0px", scale : "1,1"}, width: "0px"},
	});
}


//	stroke-dasharray: 283 1000;
//	stroke-dashoffset: -283;
const scene2 = new Scene();
const scene2_radius = [25 * 2 * Math.PI, 35 * 2 * Math.PI, 45 * 2 * Math.PI];
const scene2_delay = 0.4;

for (let i = 0; i < scene2_radius.length; ++i) {
	const radius = scene2_radius[i];

	scene2.newItem("#rotate_circle" + (i + 1), {selector: true, easing: ease, delay: scene2_delay}).set({
		0: "stroke-dasharray: 0 1000; stroke-dashoffset: 1;",
		1: `stroke-dasharray: ${radius} 1000; stroke-dashoffset: 1;"`,
		2: `stroke-dashoffset: ${-radius}`,
	});
}
scene2.newItem("#stick", {easing: ease, selector: true}).set({
	0 : "transform: rotate(-90deg) scale(1, 0)",
	[scene2_delay / 2] : "transform: rotate(-90deg) scale(1,1)", // t = delay / 2
	[scene2_delay] : "transform: rotate(-90deg) scale(1,1)", // t = delay
	[1 + scene2_delay] : "transform: rotate(270deg) scale(1,1)", // t = 1 + delay
	[2 + scene2_delay] : "transform: rotate(630deg), scale(1,1)", // t = 2 + delay
	[2 + scene2_delay + scene2_delay / 2] : "transform: scale(1,0)", // t = 2 + delay + delay / 2
});






const scene3 = new Scene();
const circles = document.querySelectorAll("#circles1 .circle");

const circlesPosition = [
	{x:0, y:0, r: 100, delay: 0, duration: 1.2},
	{x:-30, y:-50, r: 40, delay: 0.3, duration: 0.9},
	{x:40, y:50, r: 50, delay: 0.5, duration: 0.9},
	{x:-40, y:60, r: 60, delay: 0.6, duration: 0.9},
	{x:70, y:-40, r: 50, delay: 0.8, duration: 1}
];


for (let i = 0; i < circles.length; ++i) {
	const cp = circlesPosition[i];
	const r = cp.r + "px";
	const w =  (cp.r * 2) + "px";
	const {delay, duration, x, y} = cp;
	
	scene3.newItem("#circles1 .circle:nth-child(" + (i+1) + ")", {
		easing : customTimingFunction,
		selector: true,
	}).set({
		0: {"margin-left": "-"+r, "border-width" : r, "margin-top" : "-"+r, width: w, height: w, transform : {translate : x +"px,"+y+"px", scale : "0,0" }},
		[delay + 0.001]: {transform: "scale(0,0)", "border-width": r},
		[duration + delay]: {transform:"scale(1,1)", "border-width" : "0px"},
	}).setCSS(0, ["border-color"]);
}






const scene4 = new Scene();
const scene4_slice_circle = scene4.newItem("#slice_circle", {selector: true, easing: customTimingFunction});
const scene4_duration = 0.3;

scene4_slice_circle.set({
	0 : {transform : "scale(0,0)"},
	0.3 : {transform : "scale(1,1)"}, 
});

for(let i = 0; i <= 5; ++i) {
	const clipArea = i * 30 ;
	const sign = i % 2 == 0 ? 1 : -1;

	scene4_slice_circle.set(0.3 + i * scene4_duration, {
		clip: "rect("+clipArea+"px, 150px, 150px, 0px)",
		transform : "rotate(" + sign*10+"deg)"
	});
}





const scene5 = new Scene();
const css = document.querySelectorAll("#circle_squares .circle_square");
const deg = 360 / css.length;
for (let i = 0; i < css.length; ++i) {
	scene5.newItem(".circle_square:nth-child(" + (i + 1) +")", {selector: true}).load({
		0 : {transform: {rotate:(i * deg +"deg"), translate:"100px, 0px", scale: "0,0"}},
		[0 + i * 0.1 + 0.01] : {transform: {scale:"0, 0"}},
		[0.2 + i * 0.1] : {transform: {scale:"1.3, 1.3"}},
		[0.3 + i * 0.1] : {transform: {scale:"1, 1"}},
		[0.6 + i * 0.1] : {"border-radius": "50%", opacity: 1},
		[1 + i * 0.1] : {"border-radius": "0%", opacity: 0}
	});
}





const scene6 = new Scene({
	"#bomb" : {
		0 : {transform : "rotate(20deg) scale(0,0)"},
		0.3 : {transform: "scale(1.3, 1.3)"},
		0.5 : {transform: "scale(1,1)"},
	},
	"#bomb .tail path" : {
		0: {"stroke-dashoffset" : 0},
		2: {"stroke-dashoffset" : 100},
	},
	"#bomb .body": {
		2 : {transform : "scale(1,1)"},
		3 : {transform : "scale(20,20)"},

	}
}, {
	easing: ease,
	selector: true,
});


scene1.on("animate", function (e) {
	var time = e.time;
	if (scene6.getDelay() < time) {
		text.innerHTML = "6";
	} else if (scene5.getDelay() < time) {
		text.innerHTML = "5";
	} else if (scene4.getDelay() < time) {
		text.innerHTML = "4";
	} else if (scene3.getDelay() < time) {
		text.innerHTML = "3";
	} else if (scene2.getDelay() < time) {
		text.innerHTML = "2";
	} else {
		text.innerHTML = "1";
	}
});

// scene1.setIterationCount("infinite");

scene1.append(scene2);
scene1.append(scene3);
scene1.append(scene4);
scene1.append(scene5);
scene1.append(scene6);
scene1.setTime(0).play();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //daybrush.github.io/scenejs/release/latest/dist/scene.min.js
  2. //daybrush.com/codepen/scene.js