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%;

}

No tags