.robot
  .body
    %img.head{:src => "https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/bob-head.svg"}/
    %img{:src => "https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/body.svg"}/
    %img.larm{:src => "https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/left-arm.svg"}/
    %img.rarm{:src => "https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/right-arm.svg"}/
    %img.rfoot{:src => "https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/foot.svg"}/
    %img.lfoot{:src => "https://dl.dropboxusercontent.com/u/1143870/workshops/robot%20imgs/foot.svg"}/

View Compiled
html, body
  height: 100%
  overflow: hidden
.robot
  height: 100%
  position: relative
  width: 350px
  margin: auto
  .head
    z-index: -1
    position: absolute
    top: -133px
    left: 25px
    transform-origin: 50% 100%
    animation: head 2s ease-in-out infinite
  .body
    position: absolute
    z-index: 1
    top: 150px
    left: 50px
    animation: body 2s ease-in-out infinite
  .larm
    position: absolute
    z-index: 100
    transform-origin: 80% 10%
    top: 0px
    left: -34px
    animation: larm 4s ease-in-out infinite
  .rarm
    position: absolute
    z-index: 100
    transform-origin: 20% 10%
    top: 0px
    right: -34px
    animation: rarm 4s ease-in-out infinite
  .lfoot
    z-index: -1
    position: absolute
    top: 90%
    left: 30px
    transform-origin: 50% 0
    animation: lfoot 2s ease-in-out infinite
  .rfoot
    z-index: -1
    position: absolute
    top: 90%
    left: 102px
    transform-origin: 50% 0
    animation: rfoot 2s ease-in-out infinite

@keyframes head
  25%
    transform: rotateZ(15deg)

  75%
    transform: rotateZ(-15deg)

@keyframes body
  25%
    transform: translateY(10px)

  50%
    transform: translateY(-10px)

  75%
    transform: translateY(10px)

  90%
    transform: translateY(-10px)

  100%
    transform: translateY(0px)

  25%
    transform: translateX(-10px)

  75%
    transform: translateX(10px)

  25%
    transform: rotate(-10deg)

  75%
    transform: rotate(10deg)


@keyframes larm
  25%
    transform: translateY(10px)

  50%
    transform: translateY(-10px)

  25%
    transform: rotate(-80deg)

  50%
    transform: rotate(60deg)

  75%
    transform: rotate(180deg)

  100%
    transform: rotate(0deg)


@keyframes rarm
  25%
    transform: translateX(10px)

  50%
    transform: translateX(-10px)

  25%
    transform: rotate(-120deg)

  50%
    transform: rotate(60deg)

  75%
    transform: rotate(120deg)

  100%
    transform: rotate(0deg)


@keyframes lfoot
  25%
    transform: rotateZ(10deg)

  75%
    transform: rotateZ(-10deg) translateY(15%)

@keyframes rfoot
  25%
    transform: rotateZ(10deg) translateY(15%)

  75%
    transform: rotateZ(-10deg)



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.