Template:CSS/newpage

From 2014.igem.org

(Difference between revisions)
Line 380: Line 380:
}
}
 +
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
 +
 +
#robot {
 +
  position: absolute;
 +
  height: 78vh;
 +
  width: 20vh;
 +
  left: 0;
 +
  margin: 0 auto;
 +
  -webkit-animation: robot 1.8 infinite ease-in-out;
 +
          animation: robot 1.8 infinite ease-in-out;
 +
  z-index: 2;
 +
}
 +
#robot div {
 +
  position: absolute;
 +
  -webkit-transform-origin: 50% 0;
 +
      -ms-transform-origin: 50% 0;
 +
          transform-origin: 50% 0;
 +
}
 +
#robot .r div {
 +
  background: #29516D;
 +
}
 +
#robot .l div {
 +
  background: #326384;
 +
}
 +
#robot .leg.r, #robot .arm.l {
 +
  -webkit-animation: trans 1.8s 0.9s infinite ease-in-out;
 +
          animation: trans 1.8s 0.9s infinite ease-in-out;
 +
}
 +
#robot .leg.l, #robot .arm.r {
 +
  -webkit-animation: trans 1.8s infinite ease-in-out;
 +
          animation: trans 1.8s infinite ease-in-out;
 +
}
 +
#robot .head {
 +
  top: 10vh;
 +
  left: 5vh;
 +
  width: 9vh;
 +
  height: 10vh;
 +
  margin: 0 auto;
 +
  -webkit-transform-origin: 20% 150%;
 +
      -ms-transform-origin: 20% 150%;
 +
          transform-origin: 20% 150%;
 +
  -webkit-animation: head 1.8s infinite ease-in-out;
 +
          animation: head 1.8s infinite ease-in-out;
 +
  background: #326384;
 +
}
 +
#robot .arm {
 +
  left: 5vh;
 +
  top: 20.5vh;
 +
  width: 8vh;
 +
  height: 5.5vh;
 +
}
 +
#robot .arm div {
 +
  top: 100%;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 10vh;
 +
  box-sizing: border-box;
 +
  -webkit-transform: rotate(5deg);
 +
      -ms-transform: rotate(5deg);
 +
          transform: rotate(5deg);
 +
  -webkit-animation: arms 1.8s infinite ease-in-out;
 +
          animation: arms 1.8s infinite ease-in-out;
 +
}
 +
#robot .arm.l div {
 +
  -webkit-animation-delay: -0.9s;
 +
          animation-delay: -0.9s;
 +
}
 +
#robot .leg {
 +
  top: 45vh;
 +
  left: 5vh;
 +
  width: 8vh;
 +
  height: 4vh;
 +
}
 +
#robot .leg div {
 +
  width: 100%;
 +
  height: 15vh;
 +
  top: 100%;
 +
  -webkit-animation: legs1 1.8s infinite ease-in-out;
 +
          animation: legs1 1.8s infinite ease-in-out;
 +
}
 +
#robot .leg div div {
 +
  -webkit-animation: legs2 1.8s infinite ease-in-out;
 +
          animation: legs2 1.8s infinite ease-in-out;
 +
}
 +
#robot .leg.r div {
 +
  -webkit-animation-delay: -0.9s;
 +
          animation-delay: -0.9s;
 +
}
 +
 +
.shadow {
 +
  position: absolute;
 +
  width: 22vh;
 +
  height: 3vh;
 +
  margin: 0 auto;
 +
  bottom: 27px;
 +
  border-radius: 50%;
 +
  background: #05314f;
 +
  -webkit-animation: shadow 1.8s infinite ease-in-out;
 +
          animation: shadow 1.8s infinite ease-in-out;
 +
  z-index: 1;
 +
}
 +
 +
/**************************************************************************************/
 +
@-webkit-keyframes robot {
 +
  0%,    50%,    100% {
 +
    -webkit-transform: translateY(0vh) rotate(0.5deg);
 +
            transform: translateY(0vh) rotate(0.5deg);
 +
  }
 +
  15%,    65% {
 +
    -webkit-transform: translateY(-1vh) rotate(-0.2deg);
 +
            transform: translateY(-1vh) rotate(-0.2deg);
 +
  }
 +
}
 +
@keyframes robot {
 +
  0%,    50%,    100% {
 +
    -webkit-transform: translateY(0vh) rotate(0.5deg);
 +
            transform: translateY(0vh) rotate(0.5deg);
 +
  }
 +
  15%,    65% {
 +
    -webkit-transform: translateY(-1vh) rotate(-0.2deg);
 +
            transform: translateY(-1vh) rotate(-0.2deg);
 +
  }
 +
}
 +
@-webkit-keyframes trans {
 +
  0%, 100% {
 +
    -webkit-transform: translateX(0vh);
 +
            transform: translateX(0vh);
 +
  }
 +
  50% {
 +
    -webkit-transform: translateX(1.2vh);
 +
            transform: translateX(1.2vh);
 +
  }
 +
}
 +
@keyframes trans {
 +
  0%, 100% {
 +
    -webkit-transform: translateX(0vh);
 +
            transform: translateX(0vh);
 +
  }
 +
  50% {
 +
    -webkit-transform: translateX(1.2vh);
 +
            transform: translateX(1.2vh);
 +
  }
 +
}
 +
@-webkit-keyframes head {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(-1deg);
 +
            transform: rotate(-1deg);
 +
  }
 +
  25%, 75% {
 +
    -webkit-transform: rotate(2deg);
 +
            transform: rotate(2deg);
 +
  }
 +
  50% {
 +
    -webkit-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
  }
 +
}
 +
@keyframes head {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(-1deg);
 +
            transform: rotate(-1deg);
 +
  }
 +
  25%, 75% {
 +
    -webkit-transform: rotate(2deg);
 +
            transform: rotate(2deg);
 +
  }
 +
  50% {
 +
    -webkit-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
  }
 +
}
 +
@-webkit-keyframes arms {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(2deg);
 +
            transform: rotate(2deg);
 +
  }
 +
  50% {
 +
    -webkit-transform: rotate(-10deg);
 +
            transform: rotate(-10deg);
 +
  }
 +
}
 +
@keyframes arms {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(2deg);
 +
            transform: rotate(2deg);
 +
  }
 +
  50% {
 +
    -webkit-transform: rotate(-10deg);
 +
            transform: rotate(-10deg);
 +
  }
 +
}
 +
@-webkit-keyframes legs1 {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(10deg);
 +
            transform: rotate(10deg);
 +
  }
 +
  45% {
 +
    -webkit-transform: rotate(-15deg);
 +
            transform: rotate(-15deg);
 +
  }
 +
}
 +
@keyframes legs1 {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(10deg);
 +
            transform: rotate(10deg);
 +
  }
 +
  45% {
 +
    -webkit-transform: rotate(-15deg);
 +
            transform: rotate(-15deg);
 +
  }
 +
}
 +
@-webkit-keyframes legs2 {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(2deg);
 +
            transform: rotate(2deg);
 +
  }
 +
  33% {
 +
    -webkit-transform: rotate(20deg);
 +
            transform: rotate(20deg);
 +
  }
 +
  50% {
 +
    -webkit-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
  }
 +
}
 +
@keyframes legs2 {
 +
  0%, 100% {
 +
    -webkit-transform: rotate(2deg);
 +
            transform: rotate(2deg);
 +
  }
 +
  33% {
 +
    -webkit-transform: rotate(20deg);
 +
            transform: rotate(20deg);
 +
  }
 +
  50% {
 +
    -webkit-transform: rotate(0deg);
 +
            transform: rotate(0deg);
 +
  }
 +
}
 +
@-webkit-keyframes shadow {
 +
  0%,    50%,    100% {
 +
    -webkit-transform: scale(1.02);
 +
            transform: scale(1.02);
 +
  }
 +
  25%,    75% {
 +
    -webkit-transform: scale(0.98);
 +
            transform: scale(0.98);
 +
  }
 +
}
 +
@keyframes shadow {
 +
  0%,    50%,    100% {
 +
    -webkit-transform: scale(1.02);
 +
            transform: scale(1.02);
 +
  }
 +
  25%,    75% {
 +
    -webkit-transform: scale(0.98);
 +
            transform: scale(0.98);
 +
  }
 +
}
 +
</style>
</style>
</html>
</html>

Revision as of 07:30, 9 June 2015

Retrieved from "http://2014.igem.org/Template:CSS/newpage"