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

Jimmy Page Tribute Page

Jimmy Page Tribute Page

By BrianBrain
slider pure js and css3

slider pure js and css3

By zakariamouhid
project5

project5

By EmilyK
Composite Example

Composite Example

By curveball
Animated Background Gradient

Animated Background Gradient

By Nazar_TheVis
Asimov

Asimov

By tomasonn
Admin panel+pagination

Admin panel+pagination

By vovant123
A Pen by Melissa Beltran

A Pen by Melissa Beltran

By Melissa_Beltran0507
© 2018 - Copyright CodeSeek.co
contact email