<input id="toggle" class="switch" type="checkbox">
<div class="switch-day-night">
	<div class="top">
		<div class="sun-moon"></div>
		<div class="cloud a"><span></span></div>
		<div class="cloud b"><span></span></div>
		<div class="cloud c"><span></span></div>
	</div>
	<div class="bottom">
		<div class="text" data-day="It's morning!" data-night="Good night."></div>
		<label class="label" for="toggle">&nbsp;</label>
	</div>
</div>

body{
	margin:0;
	color:#444;
	background:#c8edff;
	font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

.switch{
	display:none;
}
.switch-day-night .top:before,
.switch-day-night .top:after,
.switch-day-night .top .cloud:before,
.switch-day-night .top .cloud:after,
.switch-day-night .label:before,
.switch-day-night .text:after,
.switch-day-night .text:before{
	content:'';
	position:absolute;
}

.switch-day-night{
	width:295px;
	overflow:hidden;
	margin:5% auto 0;
	border-radius:8px;
	box-shadow:0 6px 20px 0 rgba(0,0,0,.19),0 8px 17px 0 rgba(0,0,0,.2);
}
.switch-day-night .top{
	height:250px;
	position:relative;
	background-color:#333e7d;
}
.switch-day-night .top:before,
.switch-day-night .top:after{
	width:0;
	height:0;
	bottom:0;
	transition:all .4s ease-in-out 0s;
}
.switch-day-night .top:before{
	left:0;
	border:60px solid transparent;
	border-bottom:100px solid rgba(255,255,255,.3);
	border-left-width:75px;
	border-right-width:65px;
}
.switch-day-night .top:after{
	right:0;
	border:60px solid transparent;
	border-bottom:150px solid rgba(255,255,255,.2);
	border-left-width:100px;
	border-right-width:100px;
}
.switch-day-night .top .sun-moon{
	top:22px;
	right:30px;
	width:64px;
	height:64px;
	position:absolute;
	border-radius:50%;
	background-color:#fff;
	transform:scale(.8);
	transition:all .4s ease-in-out 0s;
}
.switch-day-night .top .cloud{
	z-index:1;
	width:85px;
	height:15px;
	position:absolute;
	border-radius:15px;
	background:#6280b1;
	transition:all .8s ease-in-out 0s;
}
.switch-day-night .top .cloud:before,
.switch-day-night .top .cloud:after,
.switch-day-night .top .cloud span{
	bottom:0;
	background:inherit;
	border-radius:50%;
}
.switch-day-night .top .cloud:before{
	left:15px;
	width:25px;
	height:25px;
}
.switch-day-night .top .cloud:after{
	right:10px;
	width:15px;
	height:15px;
	bottom:10px;
}
.switch-day-night .top .cloud span{
	bottom:5px;
	right:20px;
	width:30px;
	height:30px;
	position:absolute;
}
.switch-day-night .top .cloud.a{
	top:165px;
	left:-15px;
}
.switch-day-night .top .cloud.b{
	top:75px;
	left:45px;
	transform:scale(.6);
	transition-duration:1s;
}
.switch-day-night .top .cloud.c{
	top:100px;
	left:125px;
	transition-duration:1.4s;
}

.switch-day-night .bottom{
	padding:30px;
	background-color:#fff;
}
.switch-day-night .bottom .text{
	width:100%;
	color:#3f51b5;
	font-size:28px;
	min-height:20px;
	font-weight:500;
	position:relative;
	text-align:center;
}
.switch-day-night .bottom .text:before,
.switch-day-night .bottom .text:after{
	top:0;
	left:0;
	width:100%;
	position:absolute;
	text-align:inherit;
	content:attr(data-night);
	transition:all .8s ease-in-out 0s;
}
.switch-day-night .bottom .text:before{
	opacity:1;
	visibility:visible;
}
.switch-day-night .bottom .text:after{
	opacity:0;
	left:-200px;
	visibility:hidden;
	content:attr(data-day);
}
.switch-day-night .label{
	width:40px;
	height:14px;
	display:block;
	cursor:pointer;
	position:relative;
	margin:30px auto 0;
	border-radius:14px;
	background-color:#6171c6;
	transition:all .4s ease-in-out 0s;
}
.switch-day-night .label:before{
	top:50%;
	width:20px;
	height:20px;
	margin-top:-10px;
	border-radius:50%;
	text-align:center;
	transition:inherit;
	background-color:#3f51b5;
	box-shadow:1px 2px 2px rgba(0,0,0,.3);
}
.switch:checked + .switch-day-night .top{background:#70fdff}
.switch:checked + .switch-day-night .top:before{left:150px;border-bottom-color:rgba(0,0,0,.15)}
.switch:checked + .switch-day-night .top:after{right:100px;border-bottom-color:rgba(0,0,0,.25)}
.switch:checked + .switch-day-night .top .cloud{background:#fff}
.switch:checked + .switch-day-night .top .cloud.a{top:75px;left:160px}
.switch:checked + .switch-day-night .top .cloud.b{top:170px}
.switch:checked + .switch-day-night .top .cloud.c{top:130px;left:0}
.switch:checked + .switch-day-night .top .sun-moon{background:#f8e71c;transform:scale(1)}
.switch:checked + .switch-day-night .bottom .text{color:#19edf0}
.switch:checked + .switch-day-night .bottom .text:before{opacity:0;visibility:hidden;left:200px}
.switch:checked + .switch-day-night .bottom .text:after{opacity:1;visibility:visible;left:0}
.switch:checked + .switch-day-night .bottom .label{background:#b8feff}
.switch:checked + .switch-day-night .bottom .label:before{left:20px;background:#19edf0}

@keyframes bounceIn{
	0%{
		transform:scale3d(.25,.25,.25);
	}
	25%{
		transform:scale3d(.50,.50,.50);
	}
	50%{
		transform:scale3d(.75,.75,.75);
	}
	100%{
		transform:scale3d(1,1,1);
	}
}