예제 - 애니메이션 반복 횟수 (animation-iteration-count) base 2 infinite - 애니메이션 진행 방향 (animation-direction) base reverse - 애니메이션 효과 (animation-timing-function) base ease-in ease-in-out linear step-start step-end steps(4) - 애니메이션 종료 후 스타일 (animation-fill-mode) base forwards backwards 애니메이션확인
코드 - css .selector { animation-name:myAni; animation-duration:2s; animation-delay:1s; /* 애니메이션 반복 횟수 */ animation-iteration-count:2; /* animation-iteration-count:infinite; */ /* 애니메이션 진행 방향 */ animation-direction:alternate; /* animation-direction:reverse; */ /* 애니메이션 효과 */ animation-timing-function:ease-out; /* animation-timing-function:ease-in; animation-timing-function:ease-in-out; animation-timing-function:linear; animation-timing-function:steps(2); animation-timing-function:step-start; animation-timing-function:step-end; */ /* 애니메이션 종료 후 스타일 */ animation-fill-mode:forwards; /* animation-fill-mode:backwards; animation-fill-mode:both; */ } .selector {animation:myAni 2s ease-in 2s 2 alternate;} @keyframes myAni { 0 { left:0; } 50% { left:50%; } 100% { left:100%; } } - script (콜백) $('.selector').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(){ console.log('애니메이션 종료'); });