<< back to code examples

CSS3 Animation

This is a simple css3 animation of a robot face. I find this type of animation to be too much code (beacuse of all of the vendor pre-fixes) and not always cross browser compatible. It is handy for simpler animations. If you go this direction I would suggest a plugin/ reset like polyfix or modenizr.

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.wrap {
  overflow: hidden;
  position: relative;
  width: 960px;
  margin: 0 auto;
  height: 600px;
  background: #000;
}
#leftEye, #rightEye, .mouth, .textSlide {
  position: absolute;

  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: 1;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;

  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: running;
  animation-fill-mode: forwards;
}
#leftEye, #rightEye, .mouth {
  background: yellow;
}
#leftEye, #rightEye {
  bottom: 0;
  width: 100px;
  height: 100px;
}
#leftEye {
  left: 0px;
  -webkit-animation-name: leftEye;
  -moz-animation-name: leftEye;
  animation-name: leftEye;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}

#rightEye {
  right: 0px;
  -webkit-animation-name: rightEye;
  -moz-animation-name: rightEye;
  animation-name: rightEye;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  animation-duration: 2s;
}
.mouth {
  height: 0;
  left: 230px;
  top: 400px;
  width: 500px;
  -webkit-animation-name: mouth;
  -moz-animation-name: mouth;
  animation-name: mouth;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 5s;
  -moz-animation-duration: 5s;
  animation-duration: 5s;
}
.textSlide {
  margin-left: 960px;
  bottom: 0;
  left: 0px;
  color: yellow;
  width: 360px;
  padding: 10px;
  font-size: 2em;
  -webkit-animation-name: textSlide;
  -moz-animation-name: textSlide;
  animation-name: textSlide;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  animation-duration: 4s;
}

@-webkit-keyframes textSlide {
  from {margin-left: 960px;}
  to {margin-left: 0;}
}
@-moz-keyframes textSlide {
  from {margin-left: 960px;}
  to {margin-left: 0;}
} 

@-webkit-keyframes mouth {
  from {height: 0;}
  10%{height: 80px;}
  20%{height: 0px;}
  30%{height: 80px;}
  40%{height: 0px;}
  60%{height: 80px;}
  80%{height: 0px;}
  to {height: 80px;}
}
@-moz-keyframes mouth {
  from {height: 0;}
  10%{height: 80px;}
  20%{height: 0px;}
  30%{height: 80px;}
  40%{height: 0px;}
  60%{height: 80px;}
  80%{height: 0px;}
  to {height: 80px;}
}

@-webkit-keyframes rightEye {
    0% {-webkit-transform: translateY(0) translateX(0);  opacity: 1;}
    10% {-webkit-transform: translateY(-50px) translateX(-115%); opacity: 1;}
    20% {-webkit-transform: translateY(-10px) translateX(-130%); opacity: 1;}
    30% {-webkit-transform: translateY(-60px) translateX(-145%); opacity: 1;}
    40% {-webkit-transform: translateY(-20px) translateX(-160%); opacity: 1;}
    50% {-webkit-transform: translateY(-60px) translateX(-175%); opacity: 1;}
    60% {-webkit-transform: translateY(-60px) translateX(-175%); opacity: 1;}
    70% {-webkit-transform: translateY(-60px) translateX(-175%) rotate(180deg); opacity: .5;}
    80% {-webkit-transform: translateY(-90px) translateX(-305%) rotate(0deg); opacity: .2;}
    90% {-webkit-transform: translateY(-200px) translateX(-405%) rotate(180deg); opacity: .5;}
    100% {-webkit-transform: translateY(-400%) translateX(-650%) rotate(0deg); opacity: 1;}
}
@-moz-keyframes rightEye {
    0% {-moz-transform: translateY(0) translateX(0);  opacity: 1;}
    10% {-moz-transform: translateY(-50px) translateX(-115%); opacity: 1;}
    20% {-moz-transform: translateY(-10px) translateX(-130%); opacity: 1;}
    30% {-moz-transform: translateY(-60px) translateX(-145%); opacity: 1;}
    40% {-moz-transform: translateY(-20px) translateX(-160%); opacity: 1;}
    50% {-moz-transform: translateY(-60px) translateX(-175%); opacity: 1;}
    60% {-moz-transform: translateY(-60px) translateX(-175%); opacity: 1;}
    70% {-moz-transform: translateY(-60px) translateX(-175%) rotate(180deg); opacity: .5;}
    80% {-moz-transform: translateY(-90px) translateX(-305%) rotate(0deg); opacity: .2;}
    90% {-moz-transform: translateY(-200px) translateX(-405%) rotate(180deg); opacity: .5;}
    100% {-moz-transform: translateY(-400%) translateX(-650%) rotate(0deg); opacity: 1;}
}

@-webkit-keyframes leftEye {
    0% {-webkit-transform: translateY(0) translateX(0);  opacity: 1;}
    10% {-webkit-transform: translateY(-50px) translateX(115%); opacity: 1;}
    20% {-webkit-transform: translateY(-10px) translateX(130%); opacity: 1;}
    30% {-webkit-transform: translateY(-60px) translateX(145%); opacity: 1;}
    40% {-webkit-transform: translateY(-20px) translateX(160%); opacity: 1;}
    50% {-webkit-transform: translateY(-60px) translateX(175%); opacity: 1;}
    60% {-webkit-transform: translateY(-60px) translateX(175%); opacity: 1;}
    70% {-webkit-transform: translateY(-60px) translateX(175%) rotate(180deg); opacity: .5;}
    80% {-webkit-transform: translateY(-90px) translateX(305%) rotate(0deg); opacity: .2;}
    90% {-webkit-transform: translateY(-200px) translateX(405%) rotate(180deg); opacity: .5;}
    100% {-webkit-transform: translateY(-400%) translateX(650%) rotate(0deg); opacity: 1;}
}
@-moz-keyframes leftEye {
    0% {-moz-transform: translateY(0) translateX(0);  opacity: 1;}
    10% {-moz-transform: translateY(-50px) translateX(115%); opacity: 1;}
    20% {-moz-transform: translateY(-10px) translateX(130%); opacity: 1;}
    30% {-moz-transform: translateY(-60px) translateX(145%); opacity: 1;}
    40% {-moz-transform: translateY(-20px) translateX(160%); opacity: 1;}
    50% {-moz-transform: translateY(-60px) translateX(175%); opacity: 1;}
    60% {-moz-transform: translateY(-60px) translateX(175%); opacity: 1;}
    70% {-moz-transform: translateY(-60px) translateX(175%) rotate(180deg); opacity: .5;}
    80% {-moz-transform: translateY(-90px) translateX(305%) rotate(0deg); opacity: .2;}
    90% {-moz-transform: translateY(-200px) translateX(405%) rotate(180deg); opacity: .5;}
    100% {-moz-transform: translateY(-400%) translateX(650%) rotate(0deg); opacity: 1;}
}

html

<div class="wrap">
    <div id="leftEye"></div>
    <div id="rightEye"></div>
    <div class="mouth"></div>
  <div class="textSlide">
    Hello, My name is Craig...
  </div>
</div>

More Code Projects