/* 矩形 */
#animatedBox {
	width: 250px;
	height: 100px;
    background: url(day.png);
    background-size:250px 100px;
	position: relative;
	cursor: pointer;
	border-radius: 100px;
	margin-bottom: 20px;
	user-select: none;
	z-index: 1;
}

/* 圆形 - 浮在矩形上 */
#animatedBox2 {
	width: 80px;
	height: 80px;
	background: url(sun.png);
    background-size: cover;
	position: absolute;
	border-radius: 50%;
	left: 15px;  
	top: 10px;   
	z-index: 2;
	cursor: pointer;
}

.white-to-black {
	animation: whiteToBlack 1s forwards;
}

.black-to-white {
	animation: blackToWhite 1s forwards;
}

.black-to-white-right {
	animation: blackToWhiteRight 1s forwards;
}

.white-to-black-left {
	animation: whiteToBlackLeft 1s forwards;
}

@keyframes whiteToBlack {
	0%   { background: url(day.png);background-size:250px 100px; }
	100% { background: url(eve.png);background-size:250px 100px; }
}

@keyframes blackToWhite {
	0%   { background: url(eve.png);background-size:250px 100px; }
	100% { background: url(day.png);background-size:250px 100px; }
}

@keyframes blackToWhiteRight {
	0%   { background: url(sun.png);background-size: cover; left: 15px; top: 10px; }
	100% { background: url(moon.png);background-size: cover; left: 153px; top: 10px; }
}

@keyframes whiteToBlackLeft {
	0%   { background: url(moon.png);background-size: cover; left: 153px; top: 10px; }
	100% { background: url(sun.png);background-size: cover; left: 15px; top: 10px; }
}

#animatedBox:active,
#animatedBox2:active {
	transform: scale(0.97);
	transition: transform 0.1s;
}