Template:BIT/sleepycat/CSS

@keyframes tail {

 6.6666666667% {
   transform: rotate(0);
 }
 10% {
   transform: rotate(10deg);
 }
 16.6666666667% {
   transform: rotate(-5deg);
 }
 20% {
   transform: rotate(30deg);
 }
 26.6666666667% {
   transform: rotate(-2deg);
 }
 46.6666666667% {
   transform: rotate(10deg);
 }
 53.3333333333% {
   transform: rotate(-5deg);
 }
 56.6666666667% {
   transform: rotate(10deg);
 }

} @keyframes body {

 6.6666666667% {
   transform: scaleY(1);
 }
 10% {
   transform: scaleY(1.15);
 }
 16.6666666667% {
   transform: scaleY(1);
 }
 20% {
   transform: scaleY(1.25);
 }
 26.6666666667% {
   transform: scaleY(1);
 }
 46.6666666667% {
   transform: scaleY(1.15);
 }
 53.3333333333% {
   transform: scaleY(1);
 }
 56.6666666667% {
   transform: scaleY(1.15);
 }

} @keyframes left-whisker {

 6.6666666667% {
   transform: rotate(0);
 }
 10% {
   transform: rotate(0deg);
 }
 16.6666666667% {
   transform: rotate(-5deg);
 }
 20% {
   transform: rotate(0deg);
 }
 26.6666666667% {
   transform: rotate(0deg);
 }
 46.6666666667% {
   transform: rotate(10deg);
 }
 53.3333333333% {
   transform: rotate(-5deg);
 }
 56.6666666667% {
   transform: rotate(10deg);
 }

} @keyframes right-whisker {

 6.6666666667% {
   transform: rotate(180deg);
 }
 10% {
   transform: rotate(190deg);
 }
 16.6666666667% {
   transform: rotate(180deg);
 }
 20% {
   transform: rotate(175deg);
 }
 26.6666666667% {
   transform: rotate(190deg);
 }
 46.6666666667% {
   transform: rotate(180deg);
 }
 53.3333333333% {
   transform: rotate(185deg);
 }
 56.6666666667% {
   transform: rotate(175deg);
 }

} @keyframes left-ear {

 0% {
   transform: rotate(-20deg);
 }
 6.6666666667% {
   transform: rotate(-6deg);
 }
 13.3333333333% {
   transform: rotate(-15deg);
 }
 26.6666666667% {
   transform: rotate(-15deg);
 }
 33.3333333333% {
   transform: rotate(-30deg);
 }
 40% {
   transform: rotate(-30deg);
 }
 46.6666666667% {
   transform: rotate(0deg);
 }
 53.3333333333% {
   transform: rotate(0deg);
 }
 60% {
   transform: rotate(-15deg);
 }
 80% {
   transform: rotate(-15deg);
 }
 93.3333333333% {
   transform: rotate(-6deg);
 }
 100% {
   transform: rotateZ(-6deg);
 }

} @keyframes right-ear {

 0% {
   transform: rotateZ(-16deg);
 }
 6.6666666667% {
   transform: rotateZ(-16deg);
 }
 13.3333333333% {
   transform: rotateZ(-19deg);
 }
 26.6666666667% {
   transform: rotateZ(-19deg);
 }
 33.3333333333% {
   transform: rotateZ(-30deg);
 }
 36.6666666667% {
   transform: rotateZ(-19deg);
 }
 37.3333333333% {
   transform: rotateZ(-30deg);
 }
 38% {
   transform: rotateZ(-19deg);
 }
 40% {
   transform: rotateZ(-19deg);
 }
 40.6666666667% {
   transform: rotateZ(-30deg);
 }
 41.3333333333% {
   transform: rotateZ(-19deg);
 }
 46.6666666667% {
   transform: rotateZ(-9deg);
 }
 53.3333333333% {
   transform: rotateZ(-9deg);
 }
 60% {
   transform: rotateZ(-19deg);
 }
 60.6666666667% {
   transform: rotateZ(-30deg);
 }
 61.3333333333% {
   transform: rotateZ(-19deg);
 }
 62.6666666667% {
   transform: rotateZ(-19deg);
 }
 63.3333333333% {
   transform: rotateZ(-30deg);
 }
 64% {
   transform: rotateZ(-19deg);
 }
 80% {
   transform: rotateZ(-19deg);
 }
 93.3333333333% {
   transform: rotateZ(-16deg);
 }
 100% {
   transform: rotateZ(-16deg);
 }

} .main {

 margin-left:auto;
 height: 400px;
 width: 400px;
 position: relative;

} .main .stand {

 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%);
 height: 20px;
 width: 200px;
 border-radius: 20px;
 background-color: #fd6e72;
 z-index: 2;

} .main .stand::after {

 content: "";
 position: absolute;
 bottom: -10px;
 left: 50%;
 transform: translate(-50%);
 height: 10px;
 width: 50px;
 border-radius: 20px;
 background-color: #fdf9de;
 box-shadow: 0 10px 0 #fdf9de, 0 20px 0 #fdf9de, 0 30px 0 #fdf9de, 0 40px 0 #fdf9de, 0 50px 0 #fdf9de, 0 60px 0 #fdf9de, 0 70px 0 #fdf9de, 0 80px 0 #fdf9de, 0 90px 0 #fdf9de, 0 100px 0 #fdf9de, 0 110px 0 #fdf9de, 0 120px 0 #fdf9de, 0 130px 0 #fdf9de, 0 140px 0 #fdf9de, 0 150px 0 #fdf9de, 0 160px 0 #fdf9de, 0 170px 0 #fdf9de;

} .main .cat {

 width: 110px;
 height: 50px;
 position: absolute;
 top: calc(50% - 50px);
 right: 130px;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;

} .main .cat .body {

 width: 110px;
 height: 50px;
 background-color: #745260;
 position: absolute;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 animation: body 12s none infinite;

} .main .cat .head {

 content: "";
 width: 70px;
 height: 35px;
 background-color: #745260;
 position: absolute;
 top: calc(50% - 10px);
 left: -40px;
 border-top-left-radius: 80px;
 border-top-right-radius: 80px;

}

.tail-container {

 position: absolute;
 right: 0;
 bottom: -13px;
 z-index: 3;

}

.tail {

 position: absolute;
 height: 30px;
 width: 14px;
 bottom: -10px;
 right: 0;
 border-bottom-right-radius: 5px;
 background: #745260;
 z-index: 0;

} .tail > .tail {

 animation: tail 12s none infinite;
 height: 100%;
 width: 14px;
 transform-origin: left;
 border-bottom-left-radius: 20px 20px;
 border-bottom-right-radius: 20px 20px;
 border-top-right-radius: 40px;

}

.ear {

 position: absolute;
 left: 4px;
 top: -4px;
 width: 0;
 height: 0;
 border-left: 12px solid transparent;
 border-right: 12px solid transparent;
 border-bottom: 20px solid #745260;
 transform: rotate(-30deg);
 animation: left-ear 12s both infinite;

} .ear + .ear {

 animation: right-ear 12s both infinite;
 top: -12px;
 left: 30px;

}

.nose {

 position: absolute;
 bottom: 10px;
 left: -10px;
 background-color: #fd6e72;
 height: 5px;
 width: 5px;
 border-radius: 50%;

}

.whisker-container {

 position: absolute;
 bottom: 5px;
 left: -36px;
 width: 20px;
 height: 10px;
 transform-origin: right;
 animation: left-whisker 12s both infinite;

} .whisker-container:nth-child(2) {

 left: -20px;
 bottom: 12px;
 transform-origin: right;
 transform: rotate(180deg);
 animation: right-whisker 12s both infinite;

}

.whisker {

 position: absolute;
 top: 0;
 width: 100%;
 border: 1px solid #fdf9de;
 transform-origin: 100% 0;
 transform: rotate(10deg);

} .whisker:last-child {

 top: 0;
 transform: rotate(-20deg);

}