AT AT Walking with CSS

February 5 2010, 3:17am

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS. He goes over the different areas and how he uses animation and transforms. For example, the head of the beast: PLAIN TEXT CSS:

@-webkit-keyframes rotate-head{

  0% {-webkit-transform:rotate(0deg) translate(0px,0px);}

  40% {-webkit-transform:rotate(10deg) translate(15px,5px);}

  80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}

  100% {-webkit-transform:rotate(0deg) translate(0px,0px);}

}

atat #head {

  -webkit-animation-name: rotate-head;

  -webkit-animation-duration: 7s;

  -webkit-animation-iteration-count: infinite;

  -webkit-transform-origin: 0 50%;

}