CSS Android Animation

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	</head>

	<body>
	<div class="whole">
	<div class="upper">
	<div class="up1"></div>
	<div class="at1"></div>
	<div class="head">
	<div></div>
	<div></div>
	</div>
	<div class="neck"></div>
	<div class="h1"></div>
	<div class="h2"></div>
	<div class="bod">
	<div></div>
	</div>
	</div>

	<div class="leg">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>

	</div>
	</body>

	</html>

view raw android-animation.html hosted with ❤ by GitHub

CSS:

	body {
	background-image: url();
	background-size: 100%;
	background-repeat: no-repeat;
	background-color: silver;
	}

	.whole {
	width: 250px;
	height: 300px;
	background-color: transparent;
	margin-top: 20%;
	margin-left: 20%;
	}

	.upper {
	background-color: transparent;
	z-index: 1;
	animation-name: aditya;
	animation-duration: 5s;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	margin-left: 2px;
	transform-origin: bottom;
	}

	@keyframes aditya {
	0% {
	transform: rotate(0deg);
	}
	30% {
	transform: rotate(-20deg);
	}
	50% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(0deg);
	}
	}
	.up1 {
	width: 60px;
	height: 7px;
	background-color: #71b653;
	float: left;
	border-radius: 60px;
	margin-left: 20px;
	transform: rotate(60deg);
	}

	.at1 {
	width: 60px;
	height: 7px;
	background-color: #71b653;
	float: right;
	border-radius: 60px;
	margin-right: 36px;
	transform: rotate(-60deg);
	}

	.head {
	width: 190px;
	height: 90px;
	background-color: #71b653;
	border-radius: 250px 250px 0px 0px;
	margin-left: 21px;
	}

	.head > div:nth-child(1) {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: #ffffff;
	float: left;
	margin-left: -15px;
	margin-top: 47px;
	animation-name: blink1;
	animation-duration: 4s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	}

	@keyframes blink1 {
	0% {
	background-color: #ffffff;
	}
	25% {
	background-color: #ffffff;
	}
	30% {
	background-color: #71b653;
	}
	31% {
	background-color: #ffffff;
	}
	100% {
	background-color: #ffffff;
	}
	}
	.head > div:nth-child(2) {
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: #ffffff;
	float: right;
	margin-right: -15px;
	margin-top: 48px;
	animation-name: blink2;
	animation-duration: 4s;
	animation-delay: 3s;
	animation-iteration-count: infinite;
	}

	@keyframes blink2 {
	0% {
	background-color: #ffffff;
	}
	25% {
	background-color: #ffffff;
	}
	30% {
	background-color: #71b653;
	}
	31% {
	background-color: #ffffff;
	}
	100% {
	background-color: #ffffff;
	}
	}

	.bod {
	width: 110px;
	height: 90px;
	background-color: #ec1c22;
	border-radius: 0 0 15px 15px;
	margin-left: 60px;
	}
	.bod > div:nth-child(1) {
	/* background-color:white;*/
	width: 0px;
	height: 0px;
	border-top: 20px solid #71b653;
	border-right: 20px solid transparent;
	/* border-bottom:20px solid green;*/
	border-left: 20px solid transparent;
	float: right;
	margin-right: 35px;
	}

	.h1 {
	background: linear-gradient(
	#ea1d20 0px,
	#ea1d20 30px,
	#77c657 30px,
	#77c657 90px
	);
	height: 90px;
	width: 25px;
	border-radius: 25px 25px 25px 25px;
	float: left;
	margin-left: 22px;
	}

	.h2 {
	background: linear-gradient(
	#ea1d20 0px,
	#ea1d20 30px,
	#77c657 30px,
	#77c657 90px
	);
	height: 90px;
	width: 25px;
	border-radius: 25px 25px 25px 25px;
	float: right;
	margin-right: 43px;
	animation-name: wave;
	animation-duration: 5s;
	animation-delay: 2s;
	transform-origin: top;
	animation-iteration-count: infinite;
	}

	@keyframes wave {
	15% {
	transform: rotate(-170deg);
	}
	18% {
	transform: rotate(-90deg);
	}
	21% {
	transform: rotate(-170deg);
	}
	24% {
	transform: rotate(-90deg);
	}
	27% {
	transform: rotate(-170deg);
	}
	30% {
	transform: rotate(-90deg);
	}
	33% {
	transform: rotate(-170deg);
	}
	36% {
	transform: rotate(-90deg);
	}
	39% {
	transform: rotate(-170deg);
	}
	42% {
	transform: rotate(-90deg);
	}
	45% {
	transform: rotate(-170deg);
	}
	48% {
	transform: rotate(-90deg);
	}
	51% {
	transform: rotate(-170deg);
	}
	54% {
	transform: rotate(-90deg);
	}

	75% {
	transform: rotate(0deg);
	}
	}
	.neck {
	width: 130px;
	height: 10px;
	background-color: transparent;
	}

	.leg {
	width: 110px;
	height: 64px;
	background-image: repeating-linear-gradient(
	to bottom,
	#506caa 0px,
	#506caa 32px,
	#71b653 32px,
	#71b653 59px,
	#ffffff 59px,
	#ffffff 64px
	);
	margin-left: 61px;
	z-index: 3;
	/* overflow:hidden;*/
	}
	.leg > div:nth-child(1) {
	height: 50px;
	width: 20px;
	background-color: silver;
	float: left;
	border-radius: 0px 0px 50px 10px;
	}

	.leg > div:nth-child(3) {
	height: 7px;
	width: 7px;
	background-color: #ffffff;
	border-radius: 10px;
	float: left;
	margin-left: 17px;
	margin-top: 46px;
	}
	.leg > div:nth-child(5) {
	height: 64px;
	width: 11px;
	background-color: silver;
	float: left;
	margin-left: 6px;
	}
	.leg > div:nth-child(4) {
	height: 7px;
	width: 7px;
	background-color: #ffffff;
	border-radius: 10px;
	float: right;
	margin-right: 20px;
	margin-top: 46px;
	}

	.leg > div:nth-child(2) {
	height: 50px;
	width: 20px;
	background-color: silver;

	float: right;
	border-radius: 0px 0px 10px 50px;
	}