1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>animation</title> <style> #Box { width:300px; height:300px; background:url(http://www.googledrive.com/host/0B1qvynQv7w6PM3ZVVEZ3bE9YVUE) no-repeat 0 0; /*- webkit접두어생략 파이어폭스에서 테스트!! - bg이미지는 (한 방향) / (같은 크기)로 만드는것이 바람직하다. - box란 이름을 가진 @keyframes 애니메이션 한다는 의미 - 4s는 애니메이션이 일어나는 총시간 4000ms (1~9까지 장면이 4초에 끝난다.) - steps(9)는 나뉘어진 이미지의 갯수 (9장의 이미지가 연속으로 바뀌며 애니메이션) - infinite 무한반복*/ animation:box 4s steps(9) infinite; } @keyframes box { from {background-position:0 0} to {background-position:-2700px 0} /*2700px는 bg이미지의 총 길이*/ } </style> </head> <body> <div id="wrap"> <div id="Box"></div> </div> </body> </html> |
반응형
'CSS' 카테고리의 다른 글
| [CSS][jQuery UI] progressbar 애니메이션 적용 (0) | 2015.10.07 |
|---|---|
| [CSS] background 좌표값 쉽게 얻어주는 사이트 (0) | 2015.04.10 |
| [CSS] Font Awesome - 벡터 폰트 아이콘 (0) | 2015.04.06 |
| [CSS] border 투명도(opacity) 적용하기 (0) | 2015.03.27 |
| [CSS][jQuery] :target - a태그 내부링크 타겟 요소에 css적용 (0) | 2015.02.09 |
