Animation CSS

Tutorials of (Animation css) by Leandro macedo

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Animation CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="npc-1 corpo">
  <div class="calca">
    <div class="pes"></div>
    <div class="blusa">
      <div class="barra"></div>
      <div class="bolsos">
        <div class="bolso"></div>
        <div class="aba-topo"></div>
        <div class="aba-topo-sobre"></div>
      </div>
      <div class="braco-esquerdo">
        <div class="mao"></div>
      </div>
      <div class="braco-direito">
        <div class="mao"></div>
      </div>
      <div class="gola"></div>
    </div>
  </div>
  
  <div class="cabeca">
    <div class="olhos">
      <div class="olho"></div>
      <div class="iris"></div>
    </div>
    <div class="chapeu">
      <div class="aba-lateral"></div>
      <div class="aba-frontal"></div>
    </div>
    <div class="sobrancelha"></div>
    <div class="boca"></div>
  </div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
html, body { margin: 0; padding: 0; height: 100%; }
.npc-1.corpo {
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -75px;
  margin-top: -135px;
  width: 150px;
  height: 290px;
  -webkit-animation: npc-1-pulos 2s infinite;
}
.npc-1 .cabeca {
  position: relative;
  left: -20px;
  top: 0;
  background-color: #EFC7A4;
  border-radius: 50%;
  width: 190px;
  height: 190px;
}
.npc-1 .sobrancelha {
  position: absolute;
  left: 30px;
  top: 56px;
  background-color: #000;
  border-radius: 5px;
  -webkit-transform: rotate(-45deg);
  width: 35px;
  height: 5px;
}
.npc-1 .sobrancelha:after {
  content: '';
  display: block;
  position: absolute;
  left: 68px;
  top: 67px;
  background-color: #000;
  border-radius: 5px;
  -webkit-transform: rotate(90deg);
  width: 35px;
  height: 5px;
}
.npc-1 .olhos {
  position: absolute;
  left: 41px;
  top: 64px;
  width: 108px;
  height: 62px;
}
.npc-1 .olho {
  position:absolute;
  background-color: #fff;
  border-radius: 100%;
  -webkit-transform: rotate(30deg);
  width: 52px;
  height: 62px;
  -webkit-animation: npc-1-fechar_olhos 3s infinite step-start 0s;
}
.npc-1 .olho:after {
  content: '';
  display: block;
  position:absolute;
  left: 47px;
  top: -27px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-transform: rotate(-55deg);
  width: 52px;
  height: 62px;
}
.npc-1 .iris {
  position:absolute;
  left: 40px;
  top: 28px;
  background: #000;
  border-radius: 100%;
  width: 7px;
  height: 7px;
}
.npc-1 .iris:after {
  content: '';
  display: block;
  position:absolute;
  left: 26px;
  atop: -0px;
  background: #000;
  border-radius: 100%;
  width: 7px;
  height: 7px;
}
.npc-1 .boca {
  position: absolute;
  left: 75px;
  top: 150px;
  background-color: green;
  background: #000;
  border-radius: 100%/70%;
  -webkit-transform: rotate(-10deg);
  width: 30px;
  height: 20px;
}
.npc-1 .boca:after {
  content: '';
  display: block;
  position: absolute;
  left: 12px;
  top: 3px;
  background: #000;
  border-radius: 100%/70%;
  -webkit-transform: rotate(20deg);
  width: 28px;
  height: 18px;
}
.npc-1 .chapeu {
  position: absolute;
  left: 3px;
  top: -36px;
  background-color: #50B91E;
  border-radius: 12px/20px;
  width: 184px;
  height: 100px;
}
.npc-1 .aba-lateral {
  position: absolute;
  left: -24px;
  top: 78px;
  background-color: #50B91E;
  border-radius: 100%;
  -webkit-transform: rotate(20deg);
  width: 40px;
  height: 100px;
}
.npc-1 .aba-lateral:after {
  content: '';
  display: block;
  position: absolute;
  left: 185px;
  top: -66px;
  background-color: #50B91E;
  border-radius: 100%;
  -webkit-transform: rotate(-40deg);
  width: 40px;
  height: 100px;
}
.npc-1 .aba-frontal {
  position: absolute;
  left: 12px;
  top: 46px;
  background-color: #1A9030;
  width: 160px;
  height: 54px;
}
.npc-1 .calca {
  position: absolute;
  left: 11px;
  bottom: 0;
  background-color: #355758;
  -webkit-transform: rotate(3deg);
  width: 126px;
  height: 154px;
}
.npc-1 .pes {
  position: absolute;
  left: -7px;
  bottom: 0;
  background-color: #000;
  border-radius: 5px;
  width: 140px;
  height: 5px;
}
.npc-1 .blusa {
  position: absolute;
  left: -11px;
  top: 0;
  background-color: transparent;
  border-top: 114px solid #F05910;
  border-radius: 40%/100%;
  width: 148px;
  height: 114px;
}
.npc-1 .barra {
  position: absolute;
  top: -13px;
  background-color: transparent;
  border-bottom: 12px solid #F05910;
  border-radius: 100%;
  width: 148px;
  height: 12px;
}
.npc-1 .bolsos {
  position: absolute;
  top: -102px;
  border-right: 1px solid #000;
  width: 74px;
  height: 114px;
}
.npc-1 .bolso {
  position: absolute;
  left: 28px;
  top: 60px;
  background-color: #F05910;
  border: 1px solid #000;
  width: 28px;
  height: 34px;
}
.npc-1 .bolso:after {
  content: '';
  display: block;
  position: absolute;
  left: 62px;
  top: 0;
  background-color: #F05910;
  border: 1px solid #000;
  width: 28px;
  height: 34px;
}
.npc-1 .aba-topo {
  position: absolute;
  left: 28px;
  top: 60px;
  background-color: transparent;
  border-top: 15px solid #000;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  width: 0;
  height: 0;
}
.npc-1 .aba-topo:after {
  content: '';
  display: block;
  position: absolute;
  left: 48px;
  top: -14px;
  background-color: transparent;
  border-top: 15px solid #000;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  width: 0;
  height: 0;
}
.npc-1 .aba-topo-sobre {
  position: absolute;
  left: 31px;
  top: 61px;
  background-color: transparent;
  border-top: 12px solid #F05910;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  width: 0;
  height: 0;
}
.npc-1 .aba-topo-sobre:after {
  content: '';
  display: block;
  position: absolute;
  left: 51px;
  top: -11px;
  background-color: transparent;
  border-top: 12px solid #F05910;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  width: 0;
  height: 0;
}
.npc-1 .gola {
  position: absolute;
  left: 2px;
  top: -130px;
  background-color: #1A9030;
  border-radius: 100%;
  width: 140px;
  height: 80px;
}
.npc-1 .braco-esquerdo {
  position: absolute;
  left: -50px;
  top: -89px;
  background-color: #F05910;
  border-radius: 100%/80%;
  -webkit-transform: rotate(14deg);
  width: 80px;
  height: 36px;
}
.npc-1 .braco-esquerdo .mao {
  position: absolute;
  left: -8px;
  background-color: #50B91E;
  border-radius: 100%/90%;
  -webkit-transform: rotate(14deg);
  width: 30px;
  height: 34px;
}
.npc-1 .braco-direito {
  position: absolute;
  left: 120px;
  top: -94px;
  background-color: #F05910;
  border-radius: 100%/80%;
  -webkit-transform: rotate(-22deg);
  width: 80px;
  height: 36px;
}
.npc-1 .braco-direito .mao {
  position: absolute;
  right: -8px;
  background-color: #50B91E;
  border-radius: 100%/90%;
  -webkit-transform: rotate(14deg);
  width: 30px;
  height: 34px;
}
.npc-1 .braco-direito .mao:after {
  content: '';
  display: block;
  position: absolute;
  left: -4px;
  top: 2px;
  background-color: #50B91E;
  border-radius: 100%/90%;
  width: 14px;
  height: 14px;
}



@-webkit-keyframes npc-1-fechar_olhos {
  0%{ opacity: 0; }
  5%{ opacity: 1; }
  8%{ opacity: 0; }
}

@-webkit-keyframes npc-1-pulos {
  0% { margin-top: -135px; }
  6% { margin-top: -145px; -webkit-transform: rotate(-4deg); }
  12% { margin-top: -135px; }
  18% { margin-top: -145px; -webkit-transform: rotate(2deg); }
  24% { margin-top: -135px; -webkit-transform: rotate(0deg); }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Animation CSS ) is write by Leandro Macedo, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Leandro Macedo