웹킷이나 사파리에서만 동작하는 이 예제는 여러 부분으로 나누고 각 부에 애니메이션과 변형을 주는 방식으로 만들어졌습니다.
예를 들어, 머리는 다음과 같이 작성되었습니다.
[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%;
}
@-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%;
}
'[IT] Web Tech' 카테고리의 다른 글
| 웹 개발 현황 2010 by Web Directions (2) | 2010.04.28 |
|---|---|
| HTML5와 CSS3에 대한 팁과 통찰 (0) | 2010.04.27 |
| 사우더스의 성능 문제 1타5피 (3) | 2010.02.16 |
| Plupload : 아주 멋진 파일 업로드 도구 (0) | 2010.02.10 |
| CSS만으로 작성한 AT AT (0) | 2010.02.06 |
| Gordon : 자바스크립트만으로 플래시를 실행한다! (4) | 2010.01.14 |
| 제대로 막나가는(?) 프로젝트 - Skulpt (1) | 2009.08.14 |
| iPhone 스타일의 패스워드 입력창 플러그인 (0) | 2009.08.06 |
| 구글 크롬 이클립스 디버거 (0) | 2009.08.06 |
댓글을 달아 주세요