CSS mannequin

In this example below you will see how to do a CSS mannequin with some HTML / CSS and Javascript

A mannequin that can perform different actions

Thumbnail
This awesome code was written by ⁣, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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

  
</head>

<body>

  
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="radio" id="kick" name="action"/>
<label for="kick">kick</label>
<input type="radio" id="punch" name="action"/>
<label for="punch">punch</label>
<input type="radio" id="march" name="action"/>
<label for="march">march</label>
<input type="radio" id="run" name="action" checked="checked"/>
<label for="run">run</label>
<input type="radio" id="jump" name="action"/>
<label for="jump">jump</label>
<div class="man">
  <div class="body">
    <div class="stomach">
      <div class="hip">
        <div class="leg">
          <div class="knee"></div>
          <div class="calve">
            <div class="foot"></div>
          </div>
        </div>
        <div class="leg">
          <div class="knee"></div>
          <div class="calve">
            <div class="foot"></div>
          </div>
        </div>
      </div>
      <div class="chest"></div>
      <div class="head"></div>
      <div class="arm _0">
        <div class="elbow">
          <div class="underarm"></div>
        </div>
      </div>
      <div class="arm _1">
        <div class="elbow">
          <div class="underarm"></div>
        </div>
      </div>
    </div>
  </div>
</div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/pixelass/css-mannequin-zshDE */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow: hidden;
  font-size: 2em;
  background: white;
  font-family: sans-serif;
}

input[type="radio"] {
  position: absolute;
  left: -999em;
  top: 0;
}
input[type="radio"] + label {
  font-size: 0.5em;
  position: relative;
  border-radius: 0.2em;
  border: 2px solid black;
  padding: 0.25em 1em;
  margin: 0.25em;
  cursor: pointer;
  color: black;
  background: white;
}
input[type="radio"] + label:hover {
  color: white;
  background: black;
}
input[type="radio"] + label:before {
  content: '';
  padding-right: 0.5em;
  font-family: FontAwesome;
}
input[type="radio"]:checked + label:before {
  content: '\f00c';
}

.man {
  font-size: 2.5vh;
  position: relative;
  height: 20em;
  width: 10em;
  margin: 0 auto;
  /* *
  ** LEGS */
  /* *
  ** ARMS */
}
.man .body {
  height: 10em;
  width: 5em;
  position: absolute;
  top: 2em;
  left: 2.5em;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.man .hip {
  position: absolute;
  bottom: -2em;
  left: 0;
  width: 3em;
  height: 3em;
  border-radius: 2em 1em 2em 1em;
  background: #90c5da;
}
.man .hip:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-top: 0;
  background: inherit;
}
.man .stomach {
  position: absolute;
  z-index: 2;
  bottom: -1em;
  left: 1em;
  width: 3em;
  height: 4em;
  border-radius: 0 0 2em 2em;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  background: #456576;
}
.man .stomach:before {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-bottom: 0;
  border-top: 0;
  border-radius: 0 1em 1em 1em;
  background: inherit;
}
.man .chest {
  position: absolute;
  z-index: 2;
  bottom: 2em;
  left: -0.5em;
  width: 4em;
  height: 4em;
  border-radius: 2em 3em 1em 2em;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  -webkit-animation: chest 2000ms linear infinite;
          animation: chest 2000ms linear infinite;
  background: #456576;
}
.man .chest:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-bottom: 0;
  background: inherit;
}
.man .head {
  position: absolute;
  z-index: 4;
  top: -6em;
  left: 0.2em;
  right: -0.2em;
  height: 4em;
  border-radius: 3em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  background: #c4a07c;
  -webkit-animation: head 1000ms linear infinite alternate;
          animation: head 1000ms linear infinite alternate;
}
.man .head:before {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: -0.5em;
  left: 0.35em;
  right: 1em;
  height: 0.75em;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-top: 0;
  border-bottom: 0;
  border-bottom-left-radius: 1em 0.5em;
  border-bottom-right-radius: 1em 0.5em;
  background: inherit;
}
.man .leg {
  position: absolute;
  top: 2em;
  left: 0.5em;
  width: 2em;
  height: 5em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-bottom: 0;
  border-top: 0;
  border-radius: 1em;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  background: inherit;
}
.man .leg:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -1em;
  left: 0;
  right: 0;
  height: 2em;
  border-radius: inherit;
  background: inherit;
}
.man .leg:nth-child(1) {
  z-index: -1;
  background: #79b9d2;
}
.man .leg:nth-child(1) .calve {
  background: #ba9167;
}
.man .leg:nth-child(1) .foot {
  background: #ba9167;
}
.man .leg:nth-child(2) {
  z-index: 1;
  background: #94c7db;
}
.man .leg:nth-child(2) .calve {
  background: #c6a380;
}
.man .leg:nth-child(2) .foot {
  background: #c6a380;
}
.man .calve {
  position: absolute;
  top: 100%;
  left: 0.15em;
  width: 1.5em;
  height: 5em;
  border-radius: 1em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-top: 0;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  background: #c4a07c;
}
.man .calve:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -1em;
  left: 0;
  right: 0;
  height: 2em;
  border-radius: inherit;
  border: 1px solid rgba(17, 17, 17, 0.5);
  background: inherit;
}
.man .calve:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 2em;
  border-radius: inherit;
  background: inherit;
}
.man .knee {
  position: absolute;
  z-index: 2;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3em;
  border-radius: 1em;
  background: inherit;
  border-bottom: 1px solid rgba(17, 17, 17, 0.5);
}
.man .foot {
  position: absolute;
  top: 100%;
  left: -0.3em;
  width: 4em;
  height: 1em;
  border-radius: 1em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  background: #c4a07c;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
.man .foot:before {
  content: '';
  position: absolute;
  z-index: 4;
  bottom: -1px;
  left: -1px;
  right: 0.5em;
  height: 1.5em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-right: 0;
  border-radius: 3em 5em 0 1em;
  background: inherit;
}
.man .foot:after {
  content: '';
  position: absolute;
  z-index: 4;
  bottom: 1em;
  left: 0.3em;
  width: 1.4em;
  height: 1em;
  border-radius: 1em;
  background: inherit;
}
.man .arm {
  position: absolute;
  top: -0.5em;
  left: 0.5em;
  width: 2em;
  height: 4em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-bottom: 0;
  border-top: 0;
  border-radius: 1em;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  background: #c6a380;
}
.man .arm:before {
  content: '';
  position: absolute;
  z-index: 4;
  top: -0.85em;
  left: 0;
  right: 0;
  height: 2em;
  border-top: 1px solid rgba(17, 17, 17, 0.5);
  border-left: 1px solid rgba(17, 17, 17, 0.5);
  border-radius: inherit;
  background: inherit;
}
.man .arm._0 {
  z-index: 5;
}
.man .arm._1 {
  z-index: -5;
  background: #bc936a;
}
.man .elbow {
  position: absolute;
  z-index: 1;
  bottom: 1px;
  left: 1px;
  right: 1px;
  height: 2em;
  border-radius: 1em;
  background: inherit;
}
.man .underarm {
  position: absolute;
  top: 100%;
  left: 0;
  width: 1.5em;
  height: 4em;
  border-radius: 1em;
  border: 1px solid rgba(17, 17, 17, 0.5);
  border-top: 0;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  background: inherit;
}
.man .underarm:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.8em;
  left: -1px;
  right: -1px;
  height: 1.5em;
  border-radius: inherit;
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
  border-left: 1px solid rgba(17, 17, 17, 0.5);
  background: inherit;
}
.man .underarm:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -0.5em;
  left: 3px;
  right: -1px;
  height: 1em;
  border-right: 1px solid rgba(17, 17, 17, 0.5);
  border-radius: inherit;
  background: inherit;
}

#kick:checked ~ .man .leg:nth-child(2) {
  -webkit-animation: 2000ms kick-leg linear infinite;
          animation: 2000ms kick-leg linear infinite;
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
#kick:checked ~ .man .leg:nth-child(2) .calve {
  -webkit-animation: 2000ms kick-calve linear infinite;
          animation: 2000ms kick-calve linear infinite;
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}

@-webkit-keyframes kick-leg {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}

@keyframes kick-leg {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@-webkit-keyframes kick-calve {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
@keyframes kick-calve {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  50% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}
#punch:checked ~ .man .arm {
  -webkit-animation: 2000ms punch-arm linear infinite;
          animation: 2000ms punch-arm linear infinite;
}
#punch:checked ~ .man .arm .underarm {
  -webkit-animation: 2000ms punch-underarm linear infinite;
          animation: 2000ms punch-underarm linear infinite;
}
#punch:checked ~ .man .arm._0 {
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}
#punch:checked ~ .man .arm._0 .underarm {
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes punch-arm {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-80deg);
            transform: rotate(-80deg);
  }
}

@keyframes punch-arm {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-80deg);
            transform: rotate(-80deg);
  }
}
@-webkit-keyframes punch-underarm {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40%,
  70% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes punch-underarm {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40%,
  70% {
    -webkit-transform: rotate(-50deg);
            transform: rotate(-50deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#march:checked ~ .man .leg:nth-child(2) {
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
#march:checked ~ .man .leg:nth-child(2) .calve {
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
#march:checked ~ .man .leg {
  -webkit-animation: 2000ms march-leg linear infinite;
          animation: 2000ms march-leg linear infinite;
}
#march:checked ~ .man .leg .calve {
  -webkit-animation: 2000ms march-calve linear infinite;
          animation: 2000ms march-calve linear infinite;
}
#march:checked ~ .man .arm._1 {
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
#march:checked ~ .man .arm._1 .underarm {
  -webkit-animation-delay: -1000ms;
          animation-delay: -1000ms;
}
#march:checked ~ .man .arm {
  -webkit-animation: 2000ms march-arm linear infinite;
          animation: 2000ms march-arm linear infinite;
}
#march:checked ~ .man .arm .underarm {
  -webkit-animation: 2000ms march-underarm linear infinite;
          animation: 2000ms march-underarm linear infinite;
}

@-webkit-keyframes march-leg {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}

@keyframes march-leg {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
@-webkit-keyframes march-calve {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@keyframes march-calve {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@-webkit-keyframes march-arm {
  0%,
  100% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@keyframes march-arm {
  0%,
  100% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@-webkit-keyframes march-underarm {
  10%,
  90% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40%,
  70% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
@keyframes march-underarm {
  10%,
  90% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40%,
  70% {
    -webkit-transform: rotate(-30deg);
            transform: rotate(-30deg);
  }
}
#run:checked ~ .man .leg:nth-child(2) {
  -webkit-animation-delay: -500ms;
          animation-delay: -500ms;
}
#run:checked ~ .man .leg:nth-child(2) .calve {
  -webkit-animation-delay: -500ms;
          animation-delay: -500ms;
}
#run:checked ~ .man .leg {
  -webkit-animation: 1000ms run-leg linear infinite;
          animation: 1000ms run-leg linear infinite;
}
#run:checked ~ .man .leg .calve {
  -webkit-animation: 1000ms run-calve linear infinite;
          animation: 1000ms run-calve linear infinite;
}
#run:checked ~ .man .arm._1 {
  -webkit-animation-delay: -500ms;
          animation-delay: -500ms;
}
#run:checked ~ .man .arm._1 .underarm {
  -webkit-animation-delay: -500ms;
          animation-delay: -500ms;
}
#run:checked ~ .man .arm {
  -webkit-animation: 1000ms run-arm linear infinite;
          animation: 1000ms run-arm linear infinite;
}
#run:checked ~ .man .arm .underarm {
  -webkit-animation: 1000ms run-underarm linear infinite;
          animation: 1000ms run-underarm linear infinite;
}
#run:checked ~ .man .body {
  -webkit-animation: 1000ms run-body linear infinite;
          animation: 1000ms run-body linear infinite;
  -webkit-animation-delay: -500ms;
          animation-delay: -500ms;
}

@-webkit-keyframes run-leg {
  0%,
  100% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@keyframes run-leg {
  0%,
  100% {
    -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}
@-webkit-keyframes run-calve {
  0%,
  100% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@keyframes run-calve {
  0%,
  100% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@-webkit-keyframes run-arm {
  0%,
  100% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@keyframes run-arm {
  0%,
  100% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  50% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@-webkit-keyframes run-underarm {
  10%,
  90% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40%,
  70% {
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
}
@keyframes run-underarm {
  10%,
  90% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40%,
  70% {
    -webkit-transform: rotate(-60deg);
            transform: rotate(-60deg);
  }
}
@-webkit-keyframes run-body {
  0%,
  50%,
  100% {
    -webkit-transform: translate3d(0, -1em, 0);
            transform: translate3d(0, -1em, 0);
  }
  25%, 75% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes run-body {
  0%,
  50%,
  100% {
    -webkit-transform: translate3d(0, -1em, 0);
            transform: translate3d(0, -1em, 0);
  }
  25%, 75% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
#jump:checked ~ .man .leg:nth-child(2) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
#jump:checked ~ .man .leg:nth-child(2) .calve {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
#jump:checked ~ .man .leg {
  -webkit-animation: 2000ms jump-leg linear infinite;
          animation: 2000ms jump-leg linear infinite;
}
#jump:checked ~ .man .leg .calve {
  -webkit-animation: 2000ms jump-calve linear infinite;
          animation: 2000ms jump-calve linear infinite;
}
#jump:checked ~ .man .arm._1 {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
#jump:checked ~ .man .arm._1 .underarm {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
#jump:checked ~ .man .arm {
  -webkit-animation: 2000ms jump-arm linear infinite;
          animation: 2000ms jump-arm linear infinite;
}
#jump:checked ~ .man .arm .underarm {
  -webkit-animation: 2000ms jump-underarm linear infinite;
          animation: 2000ms jump-underarm linear infinite;
}
#jump:checked ~ .man .body {
  -webkit-animation: 2000ms jump-body linear infinite;
          animation: 2000ms jump-body linear infinite;
}

@-webkit-keyframes jump-leg {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}

@keyframes jump-leg {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
@-webkit-keyframes jump-calve {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@keyframes jump-calve {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
  }
}
@-webkit-keyframes jump-arm {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
@keyframes jump-arm {
  20%,
  80% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-70deg);
            transform: rotate(-70deg);
  }
}
@-webkit-keyframes jump-underarm {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
}
@keyframes jump-underarm {
  20%,
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  40% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(-120deg);
            transform: rotate(-120deg);
  }
}
@-webkit-keyframes jump-body {
  20%,
  80% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, -3em, 0);
            transform: translate3d(0, -3em, 0);
  }
}
@keyframes jump-body {
  20%,
  80% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  50% {
    -webkit-transform: translate3d(0, -3em, 0);
            transform: translate3d(0, -3em, 0);
  }
}

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

FreeCodeCamp Camper Leaderboard 2

FreeCodeCamp Camper Leaderboard 2

By catherine-b
#Codevember - Dynamic Article Timeline (ES6)

#Codevember - Dynamic Article Timeline (ES6)

By Mobius1
Flexbox - &quot;fixed&quot; withs

Flexbox - "fixed" withs

By lasseclaes
mixins

mixins

By jeanjeff
A Pen by alphadec

A Pen by alphadec

By alphadec
Performance Budget Builder

Performance Budget Builder

By bradfrost
A Pen by Irene Lakhno

A Pen by Irene Lakhno

By IreneLakhno
Responsive Homepage With Animated Intro

Responsive Homepage With Animated Intro

By daywalkerhn
© 2018 - Copyright CodeSeek.co
contact email