CodePen

HTML

            
              <div class="pigeon animation">
	<span class="body"></span>
	<span class="beak">
		<i></i>
	</span>
	<span class="head"></span>
	<span class="eye"></span>
</div>
            
          
!

CSS

            
              body {
	background-color: #acdfa1;
	min-width: 800px;
	min-height: 400px;
}
.pigeon {
	display: block;
	width: 200px;
	height: 200px;
	background-color: #acdfa1;
	border-radius: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	overflow: hidden;
}
.pigeon:before {
	content: "";
	background-color: #5c7571;
	width: 392px;
	height: 392px;
	border-radius: 392px;
	position: absolute;
	top: -8px;
	right: 5px;
}
.pigeon:after {
	content: "";
	background-color: #acdfa1;
	width: 172px;
	height: 172px;
	border-radius: 172px;
	position: absolute;
	top: -68px;
	right: 55px;
}
.body {
	width: 146px;
	height: 146px;
	border-radius: 146px;
	background-color: #82a09c;
	display: block;
	position: absolute;
	top: 33px;
	right: 34px;
	z-index: 20;
}
.body:before {
	content: "";
	width: 188px;
	height: 188px;
	border-radius: 188px;
	background-color: #acdfa1;
	position: absolute;
	top: -85px;
	right: 74px;
}
.body:after {
	content: "";
	width: 172px;
	height: 172px;
	border-radius: 172px;
	background-color: #acdfa1;
	position: absolute;
	top: 34px;
	right: 84px;
}
.beak {
	width: 48px;
	height: 48px;
	border-radius: 48px;
	display: block;
	background-color: #acdfa1;
	position: absolute;
	left: 22px;
	top: 64px;
	z-index: 30;
	overflow: hidden;
}
.beak:before {
	content: "";
	width: 70px;
	height: 70px;
	border-radius: 70px;
	background-color: #fcbdae;
	position: absolute;
	top: 5px;
	left: 17px;
	z-index: 35;
}
.beak:after {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: 48px;
	background-color: #e18574;
	position: absolute;
	top: 28px;
	left: 18px;
	z-index: 35;
}
.beak i {
	height: 48px;
	width: 48px;
	border-radius: 48px;
	background-color: #acdfa1;
	display: block;
	position: absolute;
	left: 18px;
	top: 36px;
	z-index: 38;
}
.head {
	background-color: #97bab7;
	width: 88px;
	height: 88px;
	display: block;
	border-radius: 88px;
	position: absolute;
	left: 56px;
	top: 32px;
	z-index: 40;
}
.eye {
	display: block;
	height: 14px;
	width: 14px;
	border-radius: 14px;
	position: absolute;
	top: 66px;
	left: 84px;
	background-color: #fff;
	z-index: 50;
}
.eye:before {
	content: "";
	background-color: #584942;
	width: 6px;
	height: 6px;
	border-radius: 6px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -3px 0 0 -3px;
}
.eye:after {
	content: "";
	background-color: #e0f8f6;
	width: 14px;
	height: 14px;
	border-radius: 14px;
	position: absolute;
	left: -35px;
	top: 5px;
}
/* Animation */
.animation.pigeon:before {
	animation: skech 8s infinite;
	animation-delay: .4s;
}
.animation .body {
	animation: skech 8s infinite;
	animation-delay: .6s;
}
.animation .body:before {
	animation: skech 8s infinite;
	animation-delay: .8s;
}
.animation .body:after {
	animation: skech 8s infinite;
	animation-delay: 1s;
}
.animation .beak,.animation .beak:before {
	animation: skech 8s infinite;
	animation-delay: 1.2s;
}
.animation .beak:after {
	animation: skech 8s infinite;
	animation-delay: 1.4s;
}
.animation .beak i {
	animation: skech 8s infinite;
	animation-delay: 1.6s;
}
.animation .head {
	animation: skech 8s infinite;
	animation-delay: 1.8s;
}
.animation .eye {
	animation: skech 8s infinite;
	animation-delay: 2s;
}
.animation .eye:before {
	animation: skech 8s infinite;
	animation-delay: 2.2s;
}
.animation .eye:after {
	animation: skech 8s infinite;
	animation-delay: 2.4s;
}
@keyframes "skech" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
 15% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
 85% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   	filter: alpha(opacity=100);
   	opacity: 1;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   	filter: alpha(opacity=0);
   	opacity: 0;
 }
}
@-moz-keyframes skech {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 15% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 85% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
}
@-webkit-keyframes "skech" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 15% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 85% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
}
@-ms-keyframes "skech" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 15% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 85% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
}
@-o-keyframes "skech" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 15% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 85% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
}
.pigeon.animation {
	animation: yay 8s infinite;
}
@keyframes "yay" {
 0% {
    transform: scale(1);
 }
 70% {
    transform: scale(1);
 }
 85% {
    transform: scale(1.5);
 }
 100% {
    transform: scale(1);
 }
}
@-moz-keyframes yay {
 0% {
   transform: scale(1);
 }
 70% {
   transform: scale(1);
 }
 85% {
   transform: scale(1.5);
 }
 100% {
   transform: scale(1);
 }
}
@-webkit-keyframes "yay" {
 0% {
   transform: scale(1);
 }
 70% {
   transform: scale(1);
 }
 85% {
   transform: scale(1.5);
 }
 100% {
   transform: scale(1);
 }
}
@-ms-keyframes "yay" {
 0% {
   transform: scale(1);
 }
 70% {
   transform: scale(1);
 }
 85% {
   transform: scale(1.5);
 }
 100% {
   transform: scale(1);
 }
}
@-o-keyframes "yay" {
 0% {
   transform: scale(1);
 }
 70% {
   transform: scale(1);
 }
 85% {
   transform: scale(1.5);
 }
 100% {
   transform: scale(1);
 }
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /***

This is a CSS3 Pigecon.

More information and PSD:
   http://drbl.in/hIoe

***/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................