Anthony Calzadilla 씨가 재밌는 코드를 만들어주셨습니다. CSS만으로 만들어진 AT AT 입니다.
웹킷이나 사파리에서만 동작하는 이 예제는 여러 부분으로 나누고 각 부에 애니메이션과 변형을 주는 방식으로 만들어졌습니다.
예를 들어, 머리는 다음과 같이 작성되었습니다.
[code: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%;
}
Posted by 행복한고니 트랙백 0 : 댓글 0