A Pen by Erreur32.

CSS-The-Avengers-.markdown

CSS The Avengers

CSS illustration and animation inspired by http://robindavey.co.uk/

Forked from mario sanchez maselli's Pen CSS The Avengers .

A Pen by Erreur32 on CodePen.

License.

index.html

<div class="wrapper">
  <div class="hulk">
    <div class="head"><div class="mouth"></div></div>
    <div class="right-arm"></div>
    <div class="fist"></div>
    <div class="left-arm"></div>
    <div class="body"></div>
    <div class="right-leg"></div>
    <div class="left-leg"></div>
  </div>
  
  <div class="captain">
    <div class="head">A</div>
    <div class="body"><div class="star"></div></div>
    <div class="arms"></div>
    <div class="shield"><div class="star"></div></div> 
    <div class="hands"></div>
    <div class="legs"></div>
    <div class="boots"></div>
  </div>
  
  <div class="ironman">
    <div class="helmet"><div class="mask"></div></div>
    <div class="right-arm"></div>
    <div class="left-arm"></div>
    <div class="body"><div class="power"></div></div>
    <div class="right-leg"></div>
    <div class="left-leg"></div>
  </div>  

<div class="thor">
    <div class="helmet"></div>
    <div class="head">
      <div class="beard"></div>
    </div>
    <div class="cap"></div>
    <div class="arm-right"></div>
    <div class="arm-left"></div>
    <div class="body"></div>
    <div class="hammer"></div>
    <div class="legs"></div>
    <div class="feet"></div>
  </div> 
</div>


</div>

style.scss

@import "compass/css3";


$verdeHulk: #bdbd00;
$hulkPants:#581bbb;
$body:#43abf0;
$bodyShadow:#29708f;
$white:#fff;
$whiteShadow:#ffffcb;
$red:#b63700;
$skin: #fdb0a4;
$shield:#c53905;
$ironbody:#ab3300;
$irondetail:#deb800;
$ironShadow:#c98700;
$thorbody:#004278;
$thorshadow:#00272b;
$thorskin:#ffcee7;
$thorskinShadow:#ffc688;
$hammer:#382727;
$time:7s;



@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}
@mixin star($top, $left) {
   display: block;
   color: $white;
   width: 0px;
   height: 0px;
   border-right:  10px solid transparent;
   border-bottom: 7px  solid $white;
   border-left:   10px solid transparent;
   margin-top: $top;
   margin-left: $left; 
   position: absolute;
   transform:    rotate(35deg);
   &::before {
   border-bottom: 8px solid $white;
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
   position: relative; 
   height: 0;
   width: 0;
   top: -4px;
   left: -6px;
   display: block;
   content: '';
   transform: rotate(-35deg);
}
   &::after {
   position: absolute;
   display: block;
   color: red;
   top: 0px;
   left: -10px;
   width: 0px;
   height: 0px;
   border-right: 10px solid transparent;
   border-bottom: 7px solid $white;
   border-left: 10px solid transparent;
   transform: rotate(-70deg);
   content: '';
}
}
    
  
  
*, *:before, *:after { 
box-sizing:border-box;
}  

body{
   font-size:16px;
    position:absolute;
    width:100%;
    height:100%;
}
.wrapper {
  position:relative;
  width:550px;
  height:365px;
  margin:15% auto;
  animation: shake $time infinite;
}


//HULK
.hulk{
  position:absolute;
  margin-left:200px;
  bottom:0px;
  margin-bottom:300px; 
.head {
  width: 4.713em;
  position:absolute;
  margin-top:-2.75em;
  margin-left:3.563em;    
    border-bottom: 3.75em solid $verdeHulk;
    border-left: 0.938em solid transparent;
    border-right: 0.938em solid transparent;
    height: 0;
  z-index:10;
  &::after {
    content:"";
    width:2.25em;
    height:0.375em;
    position:absolute;
    margin-top:0.538em;
    margin-left:0.313em;
    background:#034600;
  }
  &::before{
    content:"";
    width:3.25em;
    height:0.75em;
    position:absolute;
    margin-top:-0.75em;
    margin-left:-0.25em;
    background:#034600;
    border-top-left-radius: 1.875em;
    border-top-right-radius:1.875em;
  }
}
.mouth {
  width:31px;
  height:0px;
  position:absolute;
  margin-top:25px;
  margin-left:8px;
  overflow:hidden;
  background-image:
        linear-gradient(
          to bottom,
          #fff,
          #fff 25%,
          #4b0a00 25%,
          #4b0a00 70%,
          #fff 75%,
          #fff 100%
        );
 border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  animation: mouthOpen $time infinite;
  &::before{
    content:"";
    width: 10px;
    height:7px;
    position:absolute;
    background:#902e2b;
    margin-top:9px;
    margin-left:11px;
    border-top-left-radius:0.5em; 
    border-top-right-radius: 0.5em;

  }
}
.right-arm{
   width:13.313em;
    height:13.75em;
    margin-top:1em;
    margin-left:2em;
    border-radius:50%;
    background: #b5b500;
    position:absolute;
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
    animation: hulkRightarm $time infinite;
  &::after{
    content:"";
    width:12.063em;
    height:9.625em;
    border-radius:50%;
    background:white;
    position:absolute;
    transform: translateY(1.25em);
    margin-left:-3.313em;
  }
}
.left-arm
{
   width:13.313em;
    height:13.75em;
    margin-top:1em;
    margin-left:-4.3em;
    border-radius:50%;
    background: #949400;
    position:absolute;
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
    animation: hulkLeftarm $time infinite;
  &::after{
    content:"";
    width: 12.063em;
    height: 9.625em;
    border-radius: 50%;
    background: white;
    position: absolute;
    transform: translateY(1.25em);
    margin-left: 4.563em;
  }
}
.fist{
   width: 4.375em;
  height: 4.375em;
  position: absolute;
  border-radius: 50%;
  margin-top: 11.7em;
  margin-left: -2.1em;
  background:#949400;
  box-shadow: 11.1em 0 0 #b5b500;
  z-index: 10;
  animation: hulkHands $time infinite; 
}

.body {
  width: 12.5em;
  height: 12.5em;
  background: $verdeHulk;
  border-radius: 50%;
  position: absolute;
  box-shadow: inset
    1.125em 0 0 darken($verdeHulk, 5%),
    -0.938em 0 0 darken($verdeHulk, 10%);
  z-index:10;
  &::before{
    content:"";
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    position: absolute;
    margin-top: 3.125em;
    margin-left: 1.375em;
    background: darken($verdeHulk,10%);
    box-shadow: 7.625em 0 0 darken($verdeHulk, 10%);
  }
  &::after{
    content:"";
    position:absolute;
    width:0.313em;
    height:0.313em;
    border-radius:50%;
    margin-top:10em;
    margin-left:5.625em;
    background:darken($verdeHulk,10%);
    box-shadow: 0 2.625em 0 #9ac7f1
  }
}
.right-leg {
  width:0.625em;
  height:6.438em;
  position:absolute;
  margin-left:4.25em;
  margin-top:12.3em;
  background-image:
        linear-gradient(
          to bottom,
          darken($hulkPants,20%),
          darken($hulkPants,20%) 50%,
          darken($verdeHulk,20%) 50%,
          darken($verdeHulk,20%) 100%
        );
   animation:hulkPants2 $time infinite ;
  &::after{
    content:"";
    width:0.938em;
    height:0.875em;
    position:absolute;
    margin-left:0.625em;
    background:darken($hulkPants, 10%);
  }
  &::before {
    content:"";
    width:1.125em;
    height:0.188em;
    position:absolute;
    margin-top:6.25em;
    margin-left:-1.125em;
    background:darken($verdeHulk,20%);
  }
}
.left-leg{
  width:0.625em;
  height:6.438em;
  position:absolute;
  margin-left:6.688em;
  margin-top:12.3em;
  background-image:
        linear-gradient(
          to bottom,
          $hulkPants,
          $hulkPants 50%,
          $verdeHulk 50%,
          $verdeHulk 100%
        );
  animation:hulkPants $time infinite ;
  &::after{
    content:"";
    width:0.938em;
    height:0.875em;
    position:absolute;
    background:$hulkPants;
    margin-left:-0.938em;
  }
  &::before {
    content:"";
    width:1.125em;
    height:0.188em;
    position:absolute;
    margin-top:6.25em;
    margin-left:0.625em;
    background:$verdeHulk;
  }
}
}    
    

//CAPTAIN AMERICA    
.captain {
 position: absolute;
 z-index: 1000; 
 margin-left: 355px;
 bottom: 0px;
 margin-bottom: 146px;
   .head {
    width: 21px;
    height: 36px;
    background: $body;
    position: absolute;
    margin-top: -36px;
    margin-left: 44px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: $white;
    text-align: center;
    font-size: 0.6em;
    font-weight: bold; 
    &::before{
    content:"";
    width: 21px;
    height: 17px; 
    background: $skin;
    position: absolute;
    margin-left: -7px;
    margin-top: 19px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: inset 8px 0 0 0 darken($skin, 5%);
  }
   &::after {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    background: $skin;
    border-radius: 50%;
    margin-top: 16px;
    margin-left: -5px;
    
    }   
}

 
 .body 
    {
    height: 53px;
    width: 107px; 
    border-radius: 0 0 110px 110px;
    background: $body;
    box-shadow: inset 8px 0px 0 0 $bodyShadow, inset 17px 0px 0 0 darken($body,3%);
    z-index: 5; 
    &::before {
    content:"";
    width: 133px;
    height: 30px;
    margin-left: -14px;  
    position: absolute;  
    border-radius: 30px;  
    background-image:  linear-gradient(to right,$bodyShadow, $body);
    z-index:-1;  
    }
    &::after{
    content:'';  
    width: 30px;
    height: 10px;
    position: absolute;
    margin-top: 49px;
    margin-left: 38px; 
    background-image: linear-gradient(to right, darken($red,5%), darken($red,5%) 30%, $whiteShadow 30%, $whiteShadow 70%, $red 70%, $red 100%);  
    }
     .star{
      @include star(18px,43px)
      }
   
  }
  
  .arms {
    width: 10px;
    height: 60px;
    position: absolute;
    background: $whiteShadow;
    margin-top: -30px;
    margin-left: 10px;
    box-shadow: 75px 0 0 0 $whiteShadow;
    z-index: -1;
    &::before{
      content:"";
      width: 28px;
      height: 50px;
      position: absolute;
      background: $whiteShadow;
      border-radius: 30% 50%; 
      margin-left: -18px;
      margin-top: -3px;
      box-shadow: 95px 0 0 0 $whiteShadow;
    }
  }
  .shield {
        width: 40px;
        height: 40px;
        background: $body;
        border-radius: 50%;
        position: absolute;
        z-index: 100;
        margin-left: 75px;
        margin-top: 30px;
        box-shadow: 0 0 0 8px $whiteShadow, 0 0 0 18px $shield;
        transform:rotate(-30deg);
        .star{
      @include star(15px,10px); 
      }
      }  
        
  .hands {
    width: 15px;
    height: 30px;
    position: absolute;
    margin-top: 29px;
    margin-left: 8px;  
    background: darken($red, 3%); 
    transform: skew(10deg); 
    &::before {
      content:"";
      width: 10px;
      height: 30px;
      background: darken($verdeHulk, 2%);
      position: absolute;
      margin-left: 12px;  
      transform: skew(-10deg);
      }
      &::after {
      content:"";
      width: 13px;
      height: 13px;
      border-radius: 50%;
      position: absolute;
      margin-top: 21px;
      margin-left: -1px; 
      background: darken($red, 3%);
      }  
    }
    .legs {
      width: 8px;
      height: 100px;
      background: $bodyShadow;
      position:absolute;
      margin-left: 38px;
      margin-top: 5px;
      box-shadow: 22px 0 0 0 $body;
      &::before {
        content:"";
        width: 30px;
        height: 5px;
        background: darken($red,20%);
        position:absolute;     
     }
      &::after {
      content: "";  
      width: 14px;
      height: 9px;
      background-image: linear-gradient(to right, $bodyShadow, $body);
      position: absolute;
      margin-left: 8px;  
      margin-top: 5px;
      }    
    }
    .boots {
      width: 10px;
      height: 41px;
      position: absolute;
      margin-top: 105px;
      margin-left: 37px;
      background: darken($red, 10%);
      box-shadow: 22px 0 0 0 $red;
      &::after {
        content:"";
        width: 25px;
        height: 2px;
        position: absolute;
        background: darken($red, 10%);
        margin-top: 39px;
        margin-left: -15px;
        box-shadow: 40px 0 0 0 $red;
        }
      &::before{
        content: "";
        width: 18px;
        height: 12px;
        background: darken($red, 10%);
        position: absolute;
        margin-left: -4px;
        box-shadow: 22px 0 0 0 $red;
        }  
      }  
}    
    

//IRONMAN

 .ironman {  
 position: absolute;
 z-index: 900; 
 margin-left: 0;
 margin-bottom:135px;  
 bottom:0;
  .helmet {
  width:22px;
  height:34px;
  background:$ironbody;
  position: absolute;
  margin-top: -33px;
  margin-left: 44px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow:hidden;
  &::before {
    content:"";
    width:7px;
    height:2px;
    background:white;
    position:absolute;
    margin-top:10px;
    margin-left:0px;
    z-index:3; 
    box-shadow:15px 0 0 0 white; 
  }  
}    
  .mask{
    width:10px;
    height:18px;
    background:$irondetail;
    position:relative;
    margin-top:7px; 
    margin-left:6px;
    &::before {
      content:"";
      width:13px;
      height:18px;
      background:$irondetail;
      position:absolute;
      transform:rotate(60deg);   
      margin-top:-3px; 
      margin-left:4px; 
    }
    &::after {
      content:"";
      width:13px; 
      height:18px;
      background:$irondetail;
      position:absolute;
      transform:rotate(-60deg);  
      margin-top:-3px; 
      margin-left:-5px;  
    }
 }  
 .body {
   height: 53px;
    width: 107px; 
    border-radius: 0 0 110px 110px;
    background: $ironbody;
    box-shadow: inset 10px 0px 0 0 darken($ironbody,5%), inset 20px 0px 0 0 darken($ironbody,3%); 
   padding-top:11px; 
   z-index:50;
   &::before {
     content:"";
     width:32px;
     height:32px;
     background: darken( $ironbody, 5%);
     position:absolute;
     border-radius:50%;
     margin-left:-15px; 
     margin-top:-18px;
     box-shadow:105px 0 0 0 $ironbody;
     z-index:50;
   }
   &::after {
     content:"";
     width:40px;
     height:30px;
     position:absolute;
     margin-top:20px;
     margin-left:35px;
      background-image:
        linear-gradient(
          to right, 
          darken($ironbody, 5%),
          darken($ironbody, 5%) 15%,
          darken($ironbody, 3%) 15%,
          darken($ironbody, 3%) 29%,
          $ironbody 20%,
          $ironbody 20%
        );
     
   }
 }   
 .power {
   width:17px;
   height:17px;
   background:white;
   border-radius:50%;
   margin:0 auto;
   box-shadow:0 0 0 5px $irondetail; 
 }
 .left-leg {
  width:10px;
  height:90px;
  background: $ironShadow; 
  position:absolute;
  margin-left:35px;
  margin-top:12px;
  border-top-right-radius:10px;
  &::before {
    content:"";
    width:25px;
    height:65px;
    background: darken($ironbody,5%);
    position:absolute;
    border-top-right-radius:20px;
    margin-top:60px;
    margin-left:-10px;
    
  }
}
.right-leg {
  width:10px;
  height:90px;
  background: $irondetail; 
  position:absolute;
  margin-left:65px;
  margin-top:12px;
  border-top-left-radius:10px;
  &::before {
    content:"";
    width:25px;
    height:65px;
    background: $ironbody;
    position:absolute;
    border-top-left-radius:20px;
    margin-top:60px;
    margin-left:-5px;
    
  }
  
}

.left-arm{ 
  width:10px;
  height:45px;
  background:$ironShadow;
  position:absolute;
  margin-left:-6px;
  margin-top:18px;
  border-bottom-left-radius:20px;
  &::before {
    content:"";
    height: 60px;
    width: 31px; 
    border-radius: 60px 0px 0px 60px;
    background: darken($ironbody,5%);
    position:absolute;
    margin-top:30px;
    margin-left:-21px;
    z-index:-1;  
  }
  &::after {
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background: darken($ironbody,5%);
    position:absolute;
    margin-top:80px;
    margin-left:5px;
    
  }
}

   
.right-arm{ 
  width:10px;
  height:45px;
  background:$ironShadow;
  position:absolute;
  margin-left:105px;
  margin-top:18px;
  border-bottom-right-radius:20px;
  &::before {
    content:"";
    height: 60px;
    width: 31px; 
    border-radius: 0px 60px 60px 0px;
    background: $ironbody;
    position:absolute;
    margin-top:30px;
    margin-left:0px;
    z-index:-1;  
  }
  &::after {
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:$ironbody;
    position:absolute;
    margin-top:80px;
    margin-left:-5px;
    
  }
}   
  
   
}




//THOR
.thor{
  position:absolute;
  margin-left:118px; 
  z-index:1000;
  margin-bottom:220px; 
  bottom:0;
  .helmet{
      width: 0;
      height: 0;
      position:absolute;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-bottom: 40px solid #d7a900;
      margin-top:-40px;
      margin-left:42px;
      box-shadow:0 -18px 0 -16px #66999a; 
    &::before {
      content:"";
      width:13px;
      height:25px;
      position:absolute;
      background:#66999a;
      margin-left:-19px; 
      margin-top:-12px;
      border-bottom-left-radius:10px;
      border-top-right-radius:15px;
      box-shadow:inset -3px 0px 0 transparent; 
    }
    &::after {
      content:"";
      width:13px;
      height:25px;
      position:absolute;
      background:#89b9ef;
      margin-left:10px; 
      margin-top:-12px;
      border-bottom-right-radius:10px; 
      border-top-left-radius:15px;
      box-shadow:inset -3px 0px 0 transparent;
    }
  }
  .head {
    width:21px;
    height:40px;
    background-image:linear-gradient(#72a9d5, #72a9d5 32%,#ffdeef 10%);
    position:absolute;
    margin-top:-40px;
    margin-left:50px;
    border-radius:30px 30px 0 0;
    overflow:hidden;
    &::after {
      content:"";
        width:10px;
        height:17px;
        background:#d7a900;
        position:absolute;
        border-radius:10px 10px 0px 0px;
        margin-top:20px;
        margin-left:5px;
    }
    .beard{
      width:21px;
      height:5px;
      background:#d7a900;
      position:absolute;
      margin-top:12px; 
      &::before {
        content:"";
        width:11px;
        height:5px;
        background:#d7a900;
        position:absolute;
        margin-left:12px;
        margin-top:17px;
        transform:rotate(-40deg); 
      }
      &::after {
        content:"";
        width:11px;
        height:5px;
        background:#d7a900;
        position:absolute;
        margin-left:-3px;
        margin-top:17px;
        transform:rotate(40deg); 
      }
    }
  }
.body {
  border-top: 65px solid $thorbody;
  border-left: 40px solid transparent;
  border-right:40px solid transparent;
  height: 0;
  width: 120px;
  position:absolute;
  &::before {
    content:"";
    width:40px;
    height:5px;
    position:absolute;
    background-image: linear-gradient(to right, #c98700, #d7a900);
  }
  &::after {
    content:"";
    width:30px;
    height:30px;
    border-radius:50%;
    position:absolute;
    background:#94bdef;
    margin-top:-60px;
    margin-left:-17px;
    box-shadow:45px 0 0 0 #94bdef,
      10px 29px 0 -5px #94bdef,
      35px 29px 0 -5px #94bdef
      ;
  }
}
  .arm-right {
    width:40px;
    height:40px;
    background:$thorskin;
    border-radius:50%;
    position:absolute;
    margin-left:100px;
    box-shadow:-5px 0 0 $thorskin, -10px 0 0 $thorskin,-15px 0 0 $thorskin,   -20px 0 0 $thorskin, -20px 90px 0 -15px $thorskin, -20px 95px 0 -15px $thorskin, -20px 100px 0 -15px $thorskin  
      ;
    &::before {
      content:"";
      width:40px;
      height:100px;
      position:absolute;
      background:$thorskin;
      margin-left:-5px;
      margin-top:10px;
      border-bottom-right-radius:30px;
    }
    &::after {
      content:"";
      width:10px;
      height:5px;
      background:#290000;
      position:absolute;
      margin-top:113px;
      margin-left:-5px;
    }
  }
  .arm-left {
    width:40px;
    height:40px;
    background:$thorskinShadow;
    border-radius:50%;
    position:absolute;
    margin-left:0px;
    box-shadow:-5px 0 0 $thorskinShadow, -10px 0 0 $thorskinShadow,-15px 0 0 $thorskinShadow,   -20px 0 0 $thorskinShadow, 0 90px 0 -15px $thorskinShadow,0 95px 0 -15px $thorskinShadow, 0 100px 0 -15px $thorskinShadow; 
    &::before {
      content:"";
      width:40px;
      height:100px;
      position:absolute;
      background:$thorskinShadow;
      margin-left:-15px;
      margin-top:10px;
      border-bottom-left-radius:30px;
    }
    &::after {
      content:"";
      width:10px;
      height:5px;
      background:#290000;
      position:absolute;
      margin-top:113px;
      margin-left:15px; 
    }
  }
  
  .legs{
    width:13px;
    height:67px;
    background:darken($thorbody,7%);
    position:absolute;
    margin-top:70px;
    left:40px;
    border-radius:0 0 30px 30px;
    box-shadow:27px 0 0 0 $thorbody;
    &::before {
      content:"";
      width:10px;
      height:75px;
      position:absolute;
      background:darken($thorbody,7%);
      margin-left:5px;
      box-shadow: 0 75px 0 0 #b75600, 21px 0 0 0 $thorbody, 21px 75px 0 0 #ce9700;
    }
    &::after {
      content:"";
      width:11px;
      height:10px;
      background-image: linear-gradient(darken($thorbody,7%), $thorbody);
      position:absolute;
      margin-left:15px;
    }
  }
  .cap {
    width:120px;
    height:200px;
    position:absolute;
    background:#a72300;
    z-index:0;
    box-shadow:inset 10px 0 0 #721200, inset 20px 0 0 #7b1e00; 
  }
  .hammer {
    width:42px;
    height:27px;
    position:absolute;
    background: $hammer; /* fallback */
  background: 
    linear-gradient(135deg, transparent 5px, $hammer 0) top left,
    linear-gradient(225deg, transparent 5px, $hammer 0) top right,
    linear-gradient(315deg, transparent 5px, $hammer 0) bottom right,
    linear-gradient(45deg,  transparent 5px, $hammer 0) bottom left; 
  background-size: 52% 52%; 
  background-repeat: no-repeat;
    margin-top:148px;
    margin-left:1px;
    &::before{
      content:"";
      width:6px;
      height:25px;
      background:darken($hammer,5%);
      position:absolute;
      margin-top:-23px;
      margin-left:18px;
    }
    &::after {
      content:"";
      width:6px;
      height:3px;
      position:absolute;
      background:darken($hammer,5%);
      margin-top:25px;
      margin-left:18px;
    }
  }
  .feet {
    width:25px;
    height:2px;
    position:absolute;
    background:#b75600;
    margin-top:220px;
    margin-left:30px; 
    box-shadow:36px 0 0 #ce9700;
    &::after {
     content:""; 
     height:10px;
     width:20px;
     position:absolute; 
     border-radius: 90px 90px 0 0;
     background:#ce9700;
     margin-top:-85px;
     margin-left:8px; 
    box-shadow:24px 0 0 #b75600;  
    }
  }
}  
    
    
     
    

/*Hand Animation*/

@include keyframes(shake) { 
 78%, 80%,82%,84%,86%,88%,90%,92% { 
    
    top:3px;
    left:2px; 
  }
  79%,81%,83%,85%,87%,89%,91% {
   
    top:0px;
    left:-2px;
  } 
  
}

@include keyframes(mouthOpen) {
  77%{height:0px;}
  80%{
    height:22px;
  }
  93%{
    height:22px;
    opacity:1;
  }
  95%{
    height:0px;
    opacity:0;
  }

}


@include keyframes(hulkHands){
 6%{
   box-shadow: 11.1em 0 0 #b5b500;
 }
 77%{
   box-shadow: 11.1em 0 0 #b5b500;
   margin-left:-2.1em; 
   @include translate (0,0)
  }
  80%{
    margin-left:0.5em; 
    box-shadow:8.5em 0 0 #b5b500;
    @include translate (-0.9em,-19.9em)
   
  }
  93%{
    margin-left:0.5em;
    box-shadow:8.5em 0 0 #b5b500;
    @include translate (-0.9em,-19.9em)
  }
  94%{
    box-shadow: 11.1em 0 0 #b5b500;
    margin-left:-2.1em; 
    @include translate (0em,-0em)
  }
}

@include keyframes(hulkRightarm){
  77%{
    margin-top:1em;
    margin-left:2em;
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
  }
  80%{
    margin-top:-8.125em;
    margin-left:2.5em;
    clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
  }
  93%{
    margin-top:-8.125em;
    margin-left:2.5em;
    clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
  }
  95%{
    margin-top:1em;
    margin-left:2em;
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
  }
}
@include keyframes(hulkLeftarm){
  77%{
    margin-top:1em;
    margin-left:-4.3em;
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
  }
  80%{
    margin-top:-8.125em;
    margin-left:-4.375em;
    clip: rect(-0.188em, 6.563em, 13.875em, 0em);
  }
  93%{
    margin-top:-8.125em;
    margin-left:-4.375em;
    clip: rect(-0.188em, 6.563em, 13.875em, 0em);
  }
  95%{
    margin-top:1em;
    margin-left:-4.3em;
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
  }
  }