<!DOCTYPE html><html lang="ko"><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="css/default.css"><script type="text/javascript" src="js/jquery.js"></script><style type="text/css">#ani-wrapper {width:1392px;height:105px;border: 1px solid #000;background-image: url(images/mount.png);animation: ani 1s linear 0s 2;/* animation: ani 150s linear 0s infinite; */}/* 무한루프를 하려면 width와 background-position를 맞춰준다.??? */@-webkit-keyframes ani {from {background-position:1392px 50%}to {background-position:-1392px 50%} /*2700px는 bg이미지의 총 길이*/}@-moz-keyframes ani {from {background-position:1392px 50%}to {background-position:-1392px 50%}}@-ms-keyframes ani {from {background-position:1392px 50%}to {background-position:-1392px 50%}}/*https://msdn.microsoft.com/library/hh673530.aspx*//*linear : 전 구간을 동일한 속도로 진행ease : 중간은 빠르고 시작과 끝 부분은 느리게ease-in : 시작 부분을 느리게ease-out : 끝 부분을 느리게ease-in-out : 시작과 끝 부분을 느리게animation-name: myAni; 애니메이션 이름animation-duration: 3s; (ms 또는 s) 애니메이션속도animation-timing-function: ease-out;animation-delay: -1s; (ms 또는 s) 지연시간 (기본값 0)animation-iteration-count: 1; 반복횟수 (기본값 1), (무한반복 infinite)animation-direction: none; 애니메이션 재생방향 (기본값 none), (반대 reverse)animation-fill-mode: forwards; 애니메이션이 끝난 상태(위치.색상등등)를 화면에 유지. (기본값 none)animation-play-state: running; 애니메이션 플레이상태 (기본값 running), 정지(paused)// 속기법 (위 순서대로)animation: ani 150s linear 0s infinite; 또는animation: myAni 3s ease-out -1s infinite none forwards running;*/</style></head><body><div id="ani-wrapper"></div><script type="text/javascript">// 자바스크립트 애니메이션 상태 이벤트// animationstart webkitAnimationStart oanimationstart MSAnimationStart// animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration// animationend webkitAnimationEnd oanimationend MSAnimationEnd$("#ani-wrapper").on("webkitAnimationStart", function(){console.log("start");});$("#ani-wrapper").on("webkitAnimationIteration", function(){ // 반복했을때....console.log("반복했음");});$("#ani-wrapper").on("webkitAnimationEnd", function(){console.log("end");});$("#ani-wrapper").click(function(event) {console.log($(this).css("background-position")); // 진행진행되는 좌표값});</script></body></html>
반응형
'CSS' 카테고리의 다른 글
| [CSS] 인라인요소 수직, 수평 정렬 - vertical-align: middle (0) | 2016.11.14 |
|---|---|
| [CSS] attr - 요소의 속성값(텍스트)을 :before, :after content에 넣기 (0) | 2016.11.07 |
| [CSS] 테이블 상단 고정 스크롤 - fixed table header (2) | 2016.08.12 |
| [CSS] 자바스크립트 click이벤트 없이 CSS만으로 toggle 구현하기 (0) | 2016.07.12 |
| [CSS] nth-child (n번째 부터 n번째 까지 css적용) (3) | 2016.07.05 |
