[CSS] CSS 애니메이션 처리

CSS3에서 사용되는 애니메이션 

 

CSS 애니메이션을 만드려면 animation 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 애니메이션의 중간 상태는 아래에서 다룰 @keyframes  규칙을 이용하여 기술합니다. 

animation 속성의 하위 속성은 다음과 같습니다.

animation-delay

엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.

animation-direction

애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.

animation-duration

한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.

animation-iteration-count

애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.

animation-name

이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  @keyframes 규칙을 이용하여 기술합니다.

animation-play-state

애니메이션을 멈추거나 다시 시작할 수 있습니다.

animation-timing-function

중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.

animation-fill-mode

애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.

 

 

[ 예제 소스 ]

animation처리 css와 js 파일

<img alt=" " src="./image/g4.png" 
style="position: absolute; z-index: 1; width: 238px; height: 271px; left: 66px; top: 56px;" 
onclick="exeEvent('fadeOut',$(this),1,'2')" />

pubtree_animation_template.css

다운로드

pubtree_animation_template.js

다운로드

/* 
* Animation Call Function 
* exeEvent('fadeOut',$(this),1,'2'); //spped=1, loop=2
*/

function exeEvent(exe,here,speed,loop,status,direction,size) {

   if(!speed) speed=0;//1
   if(!loop) loop=1;
   if(!status) status='';
   if(!direction) direction='';
   if(!size) size='';
 
   $(here).css('animation-iteration-count','infinite');
   $(here).css('animation-duration',speed+'s');
   $(here).css('-webkit-animation-iteration-count','infinite');
   $(here).css('-webkit-animation-duration',speed+'s');

   if(exe=='show'){
     $(here).show();
     return false;
   } else if(exe=='hide') {
     $(here).hide();
     return false;
   } else if(exe=='flip'||exe=='bounce'||exe=='rotate') {
       exe=exe+status+direction;
   } else if(exe=='fade') {
       exe=exe+status+direction+size;
   } else if(exe=='light') {
       exe=exe+status;
   }
 
	$(here).addClass(exe);

   /* Animation Repection Cotrol  */
   if(loop!='infinite') {
     if (exe.indexOf('fadeOut') != -1) {
         // fadeOut function
         var wait = window.setTimeout( function(){
               $(here).hide();
               $(here).css('-webkit-animation','none');
               $(here).css('-webkit-animation','');
               return; }, 1000*speed*loop);
       } else {
           // Default exe 
           var wait = window.setTimeout( function(){
               $(here).removeClass(exe);
               $(here).css('-webkit-animation','none');
               $(here).css('-webkit-animation','');
               }, 1000*speed*loop);

       }
   }
}

 

 

참고 (stackoverflow) => 검색(구글:infinite css3 remove)

 

Turn Off CSS3 Animation With jQuery?

function stopAnimation(element)
{
    $(element).css("-webkit-animation", "none");
    $(element).css("-moz-animation", "none");
    $(element).css("-ms-animation", "none");
    $(element).css("animation", "none"); 
}

 

 

 

CSS3 Animations (w3schools.com)

http://www.w3schools.com/css3/css3_animations.asp