Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Tuesday, March 7, 2017

How to create Animation Using HTML & CSS

           ,      No comments   

Hii Friends... Today I explain how to create Animations using HTML and CSS . you can use this code in your project copy this code and paste it.

Demo :  


I ? C S S
♫ ♪

Code :  

<html>
<head>
<style>
body, html{
  width:100%;
  height:100%;
  margin:0;
  display: table;
  text-align: center;
}

.wrapper{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.background-circle{
  width: 400px;
  height: 400px;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 auto;
  background: #95B3BF;
  position: relative;
  -webkit-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  -moz-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  -o-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  -ms-mask-image: -webkit-radial-gradient(#BADA55, #BADA55);
  animation:grow 0.7s 1 ease;
  -webkit-animation:grow 0.7s 1 ease;
  transform-origin: center;
}
.border-circle{
  width: 399px;
  height: 399px;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -220px;
  margin-top: -220px; 
  border: 10px solid #FCB040;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center;
  transform-origin: center;
}
.border-circle#one{
  animation:border-pulse 1s 3.1s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:border-pulse 1s 3.1s 1 ease;
  -webkit-animation-fill-mode: forwards;
}
.border-circle#two{
  animation:border-pulse 1s 3.3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:border-pulse 1s 3.3s 1 ease;
  -webkit-animation-fill-mode: forwards;
}

.body{
  width: 285px;
  height: 600px;
  margin: 0 auto;
  background: #222;
  border-radius: 100px;
  position: relative;
  top: 200px;
  animation:body-enter 0.7s 0.2s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:body-enter 0.7s 0.2s 1 ease;
  -webkit-animation-fill-mode: forwards;
   -webkit-transform:scale(0) translateZ(0);
  transform:scale(0) translateZ(0);
}

.head{
  width: 196px;
  height: 260px;
  border-radius: 50px;
  background: #FFE4BE;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -210px;
  margin-left: -98px;
  animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
  -webkit-animation:grow 0.7s 0.4s 1 ease, music-move 1s 3.3s infinite alternate ease-in-out;
/*
  animation:grow 0.7s 0.4s 1 ease;
  -webkit-animation:grow 0.7s 0.4s 1 ease;
*/
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  -webkit-transform:scale(0) translateZ(0);
  transform:scale(0) translateZ(0);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.hair-main{
  width:220px;
  height: 0px;
  background: #E7AB57;
  border-radius: 54px 54px 0px 0px;
  margin-left: -12px;
  margin-top: -10px;
  animation:hair-anim 0.7s 0.9s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:hair-anim 0.7s 0.9s 1 ease;
  -webkit-animation-fill-mode: forwards;
  position: relative;
  z-index: 2;
}

.hair-top{
  width: 128px;
  height: 70px;
  opacity: 0;
  border-top-right-radius: 30px;
  background: #E7AB57;
  position: relative;
  top: -17px;
  left: 50%;
  transform: translateX(-64px);
  -webkit-transform: translateX(-64px);
  transform-origin: right;
  -webkit-transform-origin: right;
  animation:hair-top-anim 0.7s 1s 1 ease;
  -webkit-animation:hair-top-anim 0.7s 1s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

.hair-bottom{
  width: 54px;
  height: 50px;
  opacity: 0;
  border-bottom-left-radius: 25px;
  background: #E7AB57;
  position: relative;
  top: -20px;
  left: 50%;
  transform: translateX(-27px);
  -webkit-transform: translateX(-27px);
  transform-origin: left;
  -webkit-transform-origin: left;
  animation:hair-bottom-anim 0.7s 1.4s 1 ease;
  -webkit-animation:hair-bottom-anim 0.7s 1.4s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}
 
.sideburn{
  width: 8px;
  height: 25px;
  background: #E7AB57;
  position: absolute;
  bottom: -25px;
  opacity: 0;
  animation:sideburn-anim 0.7s 0.9s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:sideburn-anim 0.7s 0.9s 1 ease;
  -webkit-animation-fill-mode: forwards;
}

.sideburn#left{
  left: 12px;
}

.sideburn#right{
  right: 12px;
}

.face{
  width: 180px;
  height: 0px;
  border-radius: 48px 48px 0 0;
  background: #FFE4BE;
  position: absolute;
  top: 40px;
  left: 8px;
  animation:hair-anim 0.1s 0.8s 1 linear;
  animation-fill-mode: forwards;
  -webkit-animation:hair-anim 0.1s 0.8s 1 linear;
  -webkit-animation-fill-mode: forwards;
  z-index: 3;
}
.nose{
  width: 20px;
  height: 45px;
  opacity: 1;
  background: #FFE4BE;
  border-top-left-radius: 20px;
  position: absolute;
  left: 50%;
  top: 80px;
  margin-left:-20px;
  animation:shadow-anim 0.7s 3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:shadow-anim 0.7s 3s 1 ease;
  -webkit-animation-fill-mode: forwards;
  opacity: 0;
  z-index: 5;
}
.ear{
  width: 24px;
  height: 35px;
  background: #FFE4BE;
  border-radius: 12px;
  position: absolute;
  top: 116px;
  animation:grow 0.7s 1.3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 1.3s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.mouth{
  width: 66px;
  height: 33px;
  border-radius: 0 0 33px 33px;
  background: white;
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -33px;
  animation:grow 0.7s 2.6s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 2.6s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.ear#left{
  left: -12px;
}
.ear#right{
  right: -12px;
}
.eye-shadow{
  width:30px;
  height: 15px;
  border-radius: 0 0 15px 15px;
  background:rgba(149,36,0,0.1);
  position: absolute;
  top: 70px;
  animation:grow 0.7s 2s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 2s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.eye-shadow#left{
  left: 35px;
  z-index: 5;
}
.eye-shadow#right{
  right: 35px;
}
.eyebrow{
  width: 40px;
  height: 10px;
  background: #E7AB57;
  position: absolute;
  top: -35px;
  left: 50%;
  margin-left: -20px;
  opacity: 0;
  -webkit-backface-visibility: hidden;
}
.eye-shadow#left .eyebrow{
  animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:eyebrow-anim-left 0.7s 2.2s 1 ease;
  -webkit-animation-fill-mode: forwards;
}
.eye-shadow#right .eyebrow{
  animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
  animation-fill-mode: forwards;
  -webkit-animation:eyebrow-anim-right 0.7s 2.2s 1 ease, eyebrow-raise 2s 6.6s infinite alternate ease-in-out;
  -webkit-animation-fill-mode: forwards;
}
.eye{
  width: 20px;
  height: 28px;
  border-radius: 10px;
  background: #334C68;
  position: absolute;
  top: -18px;
  left: 50%;
  margin-left: -10px;
  animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  animation-fill-mode: forwards;
  -webkit-animation:grow 0.7s 2.2s 1 ease, eye-blink 4s 4.4s infinite linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;

}
.shadow-wrapper{
  width: 98px;
  height: 260px;
  position: absolute;
  left: -8px;
  bottom: -84px;
  z-index: 4;
  overflow: hidden;
}
.shadow{
  width: 98px;
  height: 260px;
  border-radius: 50px;
  background: rgba(149,36,0,0.1);
  position: absolute;
  z-index: 4;
  opacity: 0;
  animation:shadow-anim 1s 2.8s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation:shadow-anim 1s 2.8s 1 ease;
  -webkit-animation-fill-mode: forwards;
}
.triangle-light{
  width: 400px;
  height: 600px;
  background: #FFFFFF;
  opacity: 0.2;
  position: absolute;
  right: -65%;
  animation: triangle-light-anim 1s 2.8s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation: triangle-light-anim 1s 2.8s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: translate(200px,0px);
  transform: translate(200px,0px);
}
.triangle-dark{
  width: 400px;
  height: 600px;
  background: #000000;
  opacity: 0.2;
  position: absolute;
  left: -60%;
  top: 30%;
  animation: triangle-dark-anim 1s 3s 1 ease;
  animation-fill-mode: forwards;
  -webkit-animation: triangle-dark-anim 1s 3s 1 ease;
  -webkit-animation-fill-mode: forwards;
  -webkit-transform: translate(-200px,0px);
  transform: translate(-200px,0px);
}
.music-note{
  position: absolute;
  font-size: 150px;
  color: #FCB040;
  width: 1px;
  left: 50%;
  opacity: 0;
}
.music-note#one{
  margin-left: -250px;
  top: 50%;
  animation: note-anim 2s 3.5s infinite ease;
  animation-fill-mode: forwards;
  -webkit-animation: note-anim 2s 3.5s infinite ease;
  -webkit-animation-fill-mode: forwards;
}
.music-note#two{
  margin-left: 150px;
  top: 30%;
  animation: note-anim 2s 4.3s infinite ease;
  animation-fill-mode: forwards;
  -webkit-animation: note-anim 2s 4.3s infinite ease;
  -webkit-animation-fill-mode: forwards;
}
.shirt-text{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: white;
  position: relative;
  top: -300px;
  font-size: 50px;
  display: inline-block;
  -webkit-text-stroke: 2px;
  -webkit-transform: translate(0px,100px);
  transform: translate(0px,100px);
  animation-fill-mode: forwards !important;
  -webkit-animation-fill-mode: forwards !important;
}
.shirt-text:nth-of-type(1){
  animation: text-anim 0.7s 3s 1 ease;
  -webkit-animation: text-anim 0.7s 3s 1 ease;
}
.shirt-text:nth-of-type(2){
  color: #EF4136;
  animation: text-anim 0.7s 3.1s 1 ease;
  -webkit-animation: text-anim 0.7s 3.1s 1 ease;
}
.shirt-text:nth-of-type(3){
  animation: text-anim 0.7s 3.2s 1 ease;
  -webkit-animation: text-anim 0.7s 3.2s 1 ease;
}
.shirt-text:nth-of-type(4){
  animation: text-anim 0.7s 3.3s 1 ease;
  -webkit-animation: text-anim 0.7s 3.3s 1 ease;
}
.shirt-text:nth-of-type(5){
  animation: text-anim 0.7s 3.4s 1 ease;
  -webkit-animation: text-anim 0.7s 3.4s 1 ease;
}
 
@keyframes grow
{
0% { 
  position:absolute;
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
}
60% { 
  -webkit-transform: scale(1.15) translateZ(0);
  transform: scale(1.15) translateZ(0);
}
80% { 
  -webkit-transform: scale(0.95) translateZ(0);
  transform: scale(0.95) translateZ(0);
}
100% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}
}

@-webkit-keyframes grow /* Safari and Chrome */
{
0% { 
  position:absolute;
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
}
60% { 
  -webkit-transform: scale(1.15) translateZ(0);
  transform: scale(1.15) translateZ(0);
}
80% { 
  -webkit-transform: scale(0.95) translateZ(0);
  transform: scale(0.95) translateZ(0);
}
100% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}
}

@keyframes body-enter
{
0% {
  -webkit-transform: translateY(200px) translateZ(0);
  transform: translateY(200px) translateZ(0);
}
60% { 
  -webkit-transform: translateY(-20px) translateZ(0);
  transform: translateY(-20px) translateZ(0);
}
80% { 
  -webkit-transform: translateY(30px) translateZ(0);
  transform: translateY(30px) translateZ(0);
}
100% { 
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@-webkit-keyframes body-enter /* Safari and Chrome */
{
0% {
  -webkit-transform: translateY(200px) translateZ(0);
  transform: translateY(200px) translateZ(0);
}
60% { 
  -webkit-transform: translateY(-20px) translateZ(0);
  transform: translateY(-20px) translateZ(0);
}
80% { 
  -webkit-transform: translateY(30px) translateZ(0);
  transform: translateY(30px) translateZ(0);
}
100% { 
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@keyframes hair-anim
{
0% { 
  height:0px;
  -webkit-transform: translateY(137px) translateZ(0);
  transform: translateY(137px) translateZ(0);
}
100% {
  height: 137px;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@-webkit-keyframes hair-anim /* Safari and Chrome */
{
0% { 
  height:0px;
  -webkit-transform: translateY(137px) translateZ(0);
  transform: translateY(137px) translateZ(0);
}
100% {
  height: 137px;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@keyframes sideburn-anim
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@-webkit-keyframes sideburn-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform: translateY(0px) translateZ(0);
  transform: translateY(0px) translateZ(0);
}
}

@keyframes hair-top-anim
{
0% {
  opacity: 0;
  -webkit-transform:translate(-64px, 30px) translateZ(0);
  transform:translate(-64px, 30px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
}
}

@-webkit-keyframes hair-top-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform:translate(-64px, 30px) translateZ(0);
  transform:translate(-64px, 30px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 30px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
  transform: rotate(10deg) translate(-64px, -5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-64px, 0px) translateZ(0);
}
}

@keyframes hair-bottom-anim
{
0% {
  opacity: 0;
  -webkit-transform:translate(-27px, -40px) translateZ(0);
  transform:translate(-27px, -40px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
}
}

@-webkit-keyframes hair-bottom-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform:translate(-27px, -40px) translateZ(0);
  transform:translate(-27px, -40px) translateZ(0);
}
60% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
  transform: rotate(0deg) translate(-27px, -40px) translateZ(0);
}
80% { 
  opacity: 1;
  -webkit-transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
  transform: rotate(10deg) translate(-27px, 5px) translateZ(0);
}
100% { 
  opacity: 1;
  -webkit-transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
  transform: rotate(0deg) translate(-27px, 0px) translateZ(0);
}
}

@keyframes music-move
{
0% {
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
33% { 
  -webkit-transform: rotate(-5deg) translateZ(0);
  transform: rotate(-5deg) translateZ(0);
}
66% { 
  -webkit-transform: rotate(5deg) translateZ(0);
  transform: rotate(5deg) translateZ(0);
}
100% { 
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
}

@-webkit-keyframes music-move /* Safari and Chrome */
{
0% {
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
33% { 
  -webkit-transform: rotate(-5deg) translateZ(0);
  transform: rotate(-5deg) translateZ(0);
}
66% { 
  -webkit-transform: rotate(5deg) translateZ(0);
  transform: rotate(5deg) translateZ(0);
}
100% { 
  -webkit-transform: rotate(0deg) translateZ(0);
  transform: rotate(0deg) translateZ(0);
}
}

@keyframes eyebrow-anim-right
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
} 
100% {
  opacity: 1;
  -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
  transform: rotate(9deg) translateY(0px) translateZ(0);
}
}

@-webkit-keyframes eyebrow-anim-right /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform: rotate(9deg) translateY(0px) translateZ(0);
  transform: rotate(9deg) translateY(0px) translateZ(0);
}
}
@keyframes eyebrow-raise
{
0% {
  top:-35px;
}
80% {
  top:-35px;

}
100% {
  top:-45px;
}
}

@-webkit-keyframes eyebrow-raise /* Safari and Chrome */
{
0% {
  top:-35px;
}
80% {
  top:-35px;

}
100% {
  top:-45px;
}
}
@keyframes eyebrow-anim-left
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px);
} 
100% {
  opacity: 1;
  -webkit-transform:translateY(0px) translateZ(0);
  transform:translateY(0px) translateZ(0);
}
}

@-webkit-keyframes eyebrow-anim-left /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translateY(-25px) translateZ(0);
  transform: translateY(-25px) translateZ(0);
}
70% {
  opacity: 1;
  -webkit-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}
100% {
  opacity: 1;
  -webkit-transform:translateY(0px) translateZ(0);
  transform:translateY(0px) translateZ(0);
}
}

@keyframes border-pulse
{
0% {
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  border-width: 20px;
}
40% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  border-width: 20px;
  margin-left: -220px;
  margin-top: -220px;
}
100% {
  -webkit-transform: scale(1.5) translateZ(0);
  transform: scale(1.5) translateZ(0);
  border-width: 0px;
  border-style: double;
  margin-left: -200px;
  margin-top: -200px;
}
}

@-webkit-keyframes border-pulse /* Safari and Chrome */
{
0% {
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
  border-width: 20px;
}
40% {
  -webkit-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
  border-width: 20px;
  margin-left: -220px;
  margin-top: -220px;
}
100% {
  -webkit-transform: scale(1.5) translateZ(0);
  transform: scale(1.5) translateZ(0);
  border-width: 0px;
  border-style: double;
  margin-left: -200px;
  margin-top: -200px;
}
}
@keyframes shadow-anim
{
0% {
  opacity: 0;
  -webkit-transform: translate(98px,0px) translateZ(0);
  transform: translate(98px,0px) translateZ(0);
}
50% {
  opacity: 0;
}
100% {
  opacity: 1;
  -webkit-transform: translate(0px,0px) translateZ(0);
  transform: translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes shadow-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translate(98px,0px) translateZ(0);
  transform: translate(98px,0px) translateZ(0);
}
50% {
  opacity: 0;
}
100% {
  opacity: 1;
  -webkit-transform: translate(0px,0px) translateZ(0);
  transform: translate(0px,0px) translateZ(0);
}
}
@keyframes triangle-light-anim
{
0% {
  -webkit-transform: translate(200px,0px) translateZ(0);
  transform: translate(200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(45deg) translate(0px,0px) translateZ(0);
  transform: rotate(45deg) translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes triangle-light-anim /* Safari and Chrome */
{
0% {
  -webkit-transform: translate(200px,0px) translateZ(0);
  transform: translate(200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(45deg) translate(0px,0px) translateZ(0);
  transform: rotate(45deg) translate(0px,0px) translateZ(0);
}
}
@keyframes triangle-dark-anim
{
0% {
  -webkit-transform: translate(-200px,0px) translateZ(0);
  transform: translate(-200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(-45deg) translate(0px,0px) translateZ(0);
  transform: rotate(-45deg) translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes triangle-dark-anim /* Safari and Chrome */
{
0% {
  -webkit-transform: translate(-200px,0px) translateZ(0);
  transform: translate(-200px,0px) translateZ(0);
}
100% {
  -webkit-transform: rotate(-45deg) translate(0px,0px) translateZ(0);
  transform: rotate(-45deg) translate(0px,0px) translateZ(0);
}
}
@keyframes note-anim
{
0% {
  opacity: 0;
  -webkit-transform: translate(0px,50px) translateZ(0);
  transform: translate(0px,50px) translateZ(0);
}
30% {
  -webkit-transform:rotate(12deg) translate(-30px,0px) translateZ(0);
  transform:rotate(12deg) translate(-30px,0px) translateZ(0);
}
45% {
  opacity: 1;
} 
60% {
  -webkit-transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
  transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
}
100% {
  opacity: 0;
  -webkit-transform:rotate(0deg) translate(0px,-200px) translateZ(0);
  transform:rotate(0deg) translate(0px,-200px) translateZ(0);
}
}

@-webkit-keyframes note-anim /* Safari and Chrome */
{
0% {
  opacity: 0;
  -webkit-transform: translate(0px,50px) translateZ(0);
  transform: translate(0px,50px) translateZ(0);
}
30% {
  -webkit-transform:rotate(12deg) translate(-30px,0px) translateZ(0);
  transform:rotate(12deg) translate(-30px,0px) translateZ(0);
}
45% {
  opacity: 1;
} 
60% {
  -webkit-transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
  transform:rotate(-12deg) translate(30px,-100px) translateZ(0);
}
100% {
  opacity: 0;
  -webkit-transform:rotate(0deg) translate(0px,-200px) translateZ(0);
  transform:rotate(0deg) translate(0px,-200px) translateZ(0);
}
}
@keyframes text-anim
{
0% {
  -webkit-transform: translate(0px,100px) translateZ(0);
  transform: translate(0px,100px) translateZ(0);
}
60% {
  -webkit-transform:translate(0px,-20px) translateZ(0);
  transform:translate(0px,-20px) translateZ(0);
}
80% {
  -webkit-transform:translate(0px,15px) translateZ(0);
  transform:translate(0px,15px) translateZ(0);
}
100% {
  -webkit-transform:translate(0px,0px) translateZ(0);
  transform:translate(0px,0px) translateZ(0);
}
}

@-webkit-keyframes text-anim /* Safari and Chrome */
{
0% {
  -webkit-transform: translate(0px,100px) translateZ(0);
  transform: translate(0px,100px) translateZ(0);
}
60% {
  -webkit-transform:translate(0px,-20px) translateZ(0);
  transform:translate(0px,-20px) translateZ(0);
}
80% {
  -webkit-transform:translate(0px,15px) translateZ(0);
  transform:translate(0px,15px) translateZ(0);
}
100% {
  -webkit-transform:translate(0px,0px) translateZ(0);
  transform:translate(0px,0px) translateZ(0);
}
}
@keyframes eye-blink
{
0% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
45% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
50% {
  -webkit-transform: scaleY(0.1) translateZ(0);
  transform: scaleY(0.1) translateZ(0);
}
55% {
  -webkit-transform: scaleY(1) translateY(0px);
  transform: scaleY(1) translateY(0px);
}
100% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
}

@-webkit-keyframes eye-blink /* Safari and Chrome */
{
0% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
45% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
50% {
  -webkit-transform: scaleY(0.1) translateZ(0);
  transform: scaleY(0.1) translateZ(0);
}
55% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
100% {
  -webkit-transform: scaleY(1) translateY(0px) translateZ(0);
  transform: scaleY(1) translateY(0px) translateZ(0);
}
}
</style>
    </head>
<body>
  <div class="wrapper">
    <div class="border-circle" id="one"></div>
    <div class="border-circle" id="two"></div>
    <div class="background-circle">
      <div class="triangle-light"></div>
      <div class="body"></div>
      <span class="shirt-text">I</span>
      <span class="shirt-text">?</span>
      <span class="shirt-text">C</span>
      <span class="shirt-text">S</span>
      <span class="shirt-text">S</span>
      <div class="triangle-dark"></div>
    </div>
    <div class="head">
      <div class="ear" id="left"></div>
      <div class="ear" id="right"></div>
      <div class="hair-main">
        <div class="sideburn" id="left"></div>
        <div class="sideburn" id="right"></div>
        <div class="hair-top"></div>
      </div>
      <div class="face">
        <div class="hair-bottom"></div>
        <div class="nose"></div>
        <div class="eye-shadow" id="left">
          <div class="eyebrow"></div>
          <div class="eye"></div>
        </div>
        <div class="eye-shadow" id="right">
          <div class="eyebrow"></div>
          <div class="eye"></div>
        </div>
        <div class="mouth"></div>
        <div class="shadow-wrapper">
          <div class="shadow"></div>
        </div>
      </div>
    </div>
    <span class="music-note" id="one">&#9835;</span>
    <span class="music-note" id="two">&#9834;</span>
  </div>
</body>
</html>

How to create pikachu character using HTML & CSS

           ,      No comments   

Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project copy this code and paste it.
Demo : 


Code: 
<html>
<head>
<style>
* {margin:0; padding:0;}
.bg {
    background: #FFD720;
    -webkit-animation: bgch 8.5s infinite;
    -moz-animation:    bgch 8.5s infinite;
    -o-animation:      bgch 8.5s infinite;
    animation:         bgch 8.5s infinite;
    animation-fill-mode: forwards;  /*save properties after the animation is done*/
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.wrapper {
    width: 1024px;
    margin:0 auto;
}
.eyelids { /*left*/
    border-radius: 50%;
    height: 350px;
    position: absolute;
    top: 0;
    overflow: hidden;
    width: 350px;
}
.eyelids:after { /*upper*/
    content: "";
    overflow: hidden;
    height: 350px;
    width:370px;
    background:#FFD720;
    position:absolute;
    border-radius: 45% / 50%;
    overflow: hidden;
    z-index: 999;
    margin-top: -350px;
    margin-left: -9px;
    box-shadow: 446px 0 0 0 #FFD720; /*black part of the second eye*/
    -webkit-animation: blink 1.7s infinite, bgch 8.5s infinite;
    -moz-animation:    blink 1.7s infinite, bgch 8.5s infinite;
    -o-animation:      blink 1.7s infinite, bgch 8.5s infinite;
    animation:         blink 1.7s infinite, bgch 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eyelids:before { /*lower*/
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*empty circle*/
    border-radius: 50%;
    box-shadow: 0 83px 0 1px #FFD720; /*yellow circle with offset*/
    content: "";
    height: 350px;
    margin-left: -7px;
    margin-top: 0px;
    position: absolute;
    width: 364px;
    -webkit-animation: blink2 1.7s infinite, bgchE 8.5s infinite;
    -moz-animation:    blink2 1.7s infinite, bgchE 8.5s infinite;
    -o-animation:      blink2 1.7s infinite, bgchE 8.5s infinite;
    animation:         blink2 1.7s infinite, bgchE 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eyelids2 { /*right*/
    border-radius: 50%;
    height: 350px;
    margin-left: 446px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 350px;
}
.eyelids2:after { /*upper*/
    content: "";
    overflow: hidden;
    height: 350px;
    width:370px;
    background:#FFD720;
    position:absolute;
    border-radius: 45% / 50%;
    overflow: hidden;
    z-index: 999;
    margin-top: -350px;
    margin-left: -9px;
    box-shadow: 446px 0 0 0 #FFD720; /*black part of the second eye*/
    -webkit-animation: blink 1.7s infinite, bgch 8.5s infinite;
    -moz-animation:    blink 1.7s infinite, bgch 8.5s infinite;
    -o-animation:      blink 1.7s infinite, bgch 8.5s infinite;
    animation:         blink 1.7s infinite, bgch 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eyelids2:before { /*lower*/
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*empty circle*/
    border-radius: 50%;
    box-shadow: 0 83px 0 1px #FFD720; /*yellow circle with offset*/
    content: "";
    height: 350px;
    margin-left: -7px;
    margin-top: 0px;
    position: absolute;
    width: 364px;
    -webkit-animation: blink2 1.7s infinite, bgchE 8.5s infinite;
    -moz-animation:    blink2 1.7s infinite, bgchE 8.5s infinite;
    -o-animation:      blink2 1.7s infinite, bgchE 8.5s infinite;
    animation:         blink2 1.7s infinite, bgchE 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eye { /*black part of the eye*/
    margin-top: 40px;
    height: 350px;
    width:350px;
    background:#000000;
    position:relative;
    border-radius: 50%;
    margin-left: 114px;
    box-shadow: 446px 0 0 0 #000000; /*black part of the second eye*/
    -webkit-animation: bgchEYE 8.5s infinite;
    -moz-animation:    bgchEYE 8.5s infinite;
    -o-animation:      bgchEYE 8.5s infinite;
    animation:         bgchEYE 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eye:before { /*pupil*/
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 50%;
    content: "";
    display: block;
    position:relative;
    top: 100px;
    height: 150px;
    width: 150px;
    margin: 100px auto 0;      
    box-shadow: 440px 0 0 1px #FFFFFF; /* second pupil */
    -webkit-animation: bgchPUP 8.5s infinite;
    -moz-animation:    bgchPUP 8.5s infinite;
    -o-animation:      bgchPUP 8.5s infinite;
    animation:         bgchPUP 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.eye:after { /*cheeks*/
    background: none repeat scroll 0 0 #F61037;
    border-radius: 50%;
    content: "";
    height: 230px;
    width: 230px;
    margin-left: -120px;
    margin-top: 170px;
    position: absolute;
    box-shadow: 810px 0 0 1px #F61037; /* second cheek */
    z-index: 1000;/* bgg 0.1s 2.1s, bgbb 0.1s 4.8s, bgyy 0.1s 7.5s; */
    -webkit-animation: bgchch 8.5s infinite;
    -moz-animation:    bgchch 8.5s infinite;
    -o-animation:      bgchch 8.5s infinite;
    animation:         bgchch 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
.nose {
    position: relative;
    margin: -28px auto 0;
    border-left: 25px solid rgba(0, 0, 0, 0);
    border-right: 25px solid rgba(0, 0, 0, 0);
    border-top: 28px solid #000000;
    height: 0;
    width: 0;
}
.mouth {
    position: relative;
    margin:0 auto;
    margin-top: 50px;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    border-bottom: 67px solid #000000;
    height: 0;
    width: 0;
}
.mouth:before {
    border-bottom: 54px solid #FFD720;
    border-left: 50px solid rgba(0, 0, 0, 0);
    border-right: 50px solid rgba(0, 0, 0, 0);
    content: "";
    left: -50px;
    margin-top: 13px;
    position: absolute;
    -webkit-animation: bgchm 8.5s infinite;
    -moz-animation:    bgchm 8.5s infinite;
    -o-animation:      bgchm 8.5s infinite;
    animation:         bgchm 8.5s infinite;
    animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

/*MOUTH COLOR CHANGING ANIMATION*/
@-webkit-keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@-moz-keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@-o-keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}
@keyframes bgchm {
    15.945330296127564% {border-bottom: 54px solid #FFD720;} /*wait*/
    16% {border-bottom: 54px solid #0099cc;} /*change*/
    35% {border-bottom: 54px solid #0099cc;} /*wait*/
    36% {border-bottom: 54px solid #ff6699;} /*change*/
    55% {border-bottom: 54px solid #ff6699;} /*wait*/
    56% {border-bottom: 54px solid #FFD720;} /*change*/
    75% {border-bottom: 54px solid #FFD720;} /*wait*/
    76% {border-bottom: 54px solid #0099cc;} /*change*/
    95% {border-bottom: 54px solid #0099cc;} /*wait*/
    96% {border-bottom: 54px solid #FFD720;} /*change*/
}

/*CHEEKS*/
@-webkit-keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@-moz-keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@-o-keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}
@keyframes bgchch {
    15.945330296127564% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    16% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    35% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    36% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*change b*/
    55% {background:#66ffff; box-shadow: 810px 0 0 1px #66ffff;} /*wait b*/
    56% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
    75% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*wait*/
    76% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*change*/
    95% {background:#66cc99; box-shadow: 810px 0 0 1px #66cc99;} /*wait*/
    96% {background:#F61037; box-shadow: 810px 0 0 1px #F61037;} /*change*/
}

/*BLINK upper eyelid*/
@-webkit-keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}
@-moz-keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}
@-o-keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}
@keyframes blink {
    74.07407407407408% {margin-top: -350px; border-radius: 45% / 50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% { margin-top: -350px;}      
}

/*BLINK lower eyelid*/
@-webkit-keyframes blink2 {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}
@-moz-keyframes blink2 {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}
@-o-keyframes blink2 {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}
@keyframes blink2     {
    74.07407407407408% {margin-top: 0px; border-radius:50%;}
    79% { margin-top: -50px;border-radius: 50% / 21%;}
    83% {margin-top: 0px; border-radius:50%;}
}

/*PUPILS eye:before*/
@-webkit-keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@-moz-keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@-o-keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}
@keyframes bgchPUP {
    15.945330296127564% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    16% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    35% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    36% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*change*/
    55% {background:#ff0000; box-shadow: 440px 0 0 1px #ff0000;} /*wait*/
    56% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
    75% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*wait*/
    76% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*change*/
    95% {background:#3333cc; box-shadow: 440px 0 0 1px #3333cc;} /*wait*/
    96% {background:#FFFFFF; box-shadow: 440px 0 0 1px #FFFFFF;} /*change*/
}

/*EYES*/
@-webkit-keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@-moz-keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@-o-keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}
@keyframes bgchEYE {
    15.945330296127564% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    16% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    35% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    36% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*change*/
    55% {background:#66ff00; box-shadow: 446px 0 0 0 #66ff00;} /*wait*/
    56% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
    75% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*wait*/
    76% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*change*/
    95% {background:#fdb907; box-shadow: 446px 0 0 0 #fdb907;} /*wait*/
    96% {background:#000000; box-shadow: 446px 0 0 0 #000000;} /*change*/
}

/*UNIVERSAL CHANGE*/
@-webkit-keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@-moz-keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@-o-keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}
@keyframes bgch {
    15.945330296127564% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    16% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    35% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    36% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*change*/
    55% {background:#ff6699; box-shadow: 446px 0 0 0 #ff6699;} /*wait*/
    56% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
    75% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*wait*/
    76% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*change*/
    95% {background:#0099cc; box-shadow: 446px 0 0 0 #0099cc;} /*wait*/
    96% {background:#FFD720; box-shadow: 446px 0 0 0 #FFD720;} /*change*/
}

/*EYELIDS*/
@-webkit-keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@-moz-keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@-o-keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}
@keyframes bgchE {
    15.945330296127564% {box-shadow: 0 83px 0 1px #FFD720;} /*wait yellow*/
    16% {box-shadow: 0 83px 0 1px #0099cc;} /*change blue*/
    35% {box-shadow: 0 83px 0 1px #0099cc;} /*wait blue*/
    36% {box-shadow: 0 83px 0 1px #ff6699;} /*change pink*/
    55% {box-shadow: 0 83px 0 1px #ff6699;} /*wait*/
    56% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
    75% {box-shadow: 0 83px 0 1px #FFD720;} /*wait*/
    76% {box-shadow: 0 83px 0 1px #0099cc;} /*change*/
    95% {box-shadow: 0 83px 0 1px #0099cc;} /*wait*/
    96% {box-shadow: 0 83px 0 1px #FFD720;} /*change*/
}

</style>
</head>
<body>
<div class="wrapper">
    <div class="eye">
        <div class="eyelids"></div>
        <div class="eyelids2"></div>
    </div>
    <div class="nose"></div>
    <div class="mouth"></div>
</div>
</body>
</html>

 

Popular Posts

  • Asp.net insert, Edit, update, delete in grid view
    Introduction :   Here I explain how to insert, edit, update and delete data in grid view using asp.net. In this project I use so...
  • Angular Expressions
    Intoduction :-   Hii Friends... Today I explain about angular js expressions. this is similar to JavaScript expressions. 1) The expr...
  • Basic of css.
    Introduction :- Hii Friends..   Today I explain what is Css and why we use Css and the basic structure of css. so here I               ...
  • stored procedure with case and actions
    Intoduction :- Hii Friends... Today I  explain how to use case and action in stored procedure .  CREATE Proc [dbo].[Proc_ManageRatingA...
  • How to create pikachu character using HTML & CSS
    Hii Friends... Today I explain how to create cartoon( Pikachu character) using HTML and CSS . you can use this code in your project cop...
  • How To Make Semi-Transparent Buttons
    Intoduction :-   Hii Friends...   Today I explain how to make Semi-Transparent Buttons with the help of css. This style now a days goes t...
  • Create a Cart Popup div in HTML & CSS
    Intoduction :-   Hii Friends... Today I explain how to Create a Cart Popup div in HTML & CSS . This moduel base on mouse hover when y...
  • Awarepedia services
    Intoduction :-   Hii Friends...   Today I explain services of awarepedia.com  . Awarepedia is a online software development company and the...
  • How To scroll from bottom to top
    Intoduction :- Hii Friends...   Today I explain How To scroll from top to bottom and bottom to top, we use “scrollTop” function of jque...
  • Auto-Hiding Navbar with Javascript
    Intoduction :-   Hii Friends... today i explain how to hide a navbar when scroll the page. Fixed headers are fairly common nowadays with...