[CSS] CSS3 에서 사용되는 animation효과 처리

webkit 에서 animation 효과를 사용하면, "-webkit-animation:1s'는 속성이 들어간다.
해당 속성을 지워주지 않으면 다른 애니메이션 효과가 적용이 안될 수가 있다.
그래서 해당 Attribute값을 지워줘야 한다.

$(객체).css('-webkit-animation','');//jquery을 사용한 CSS  attribute  삭제 예제

pubtree_animation_template.js

다운로드

$(here).css('animation-iteration-count','infinite');
$(here).css('animation-duration',speed+'s');

/* 애니메이션 반복 횟수 지정. */
$(here).css('-webkit-animation-iteration-count','infinite');

/* 애니메이션이 실행되는 총 시간을 지정한다.(기본 값:0) */
$(here).css('-webkit-animation-duration',speed+'s');

 

CSS property: -webkit-animation : 
http://css-infos.net/property/-webkit-animation

 

---

 

아래는 애니메션 속성을 나열했습니다.

 

출처:  http://m.mkexdev.net/83

 

 

애니메이션 속성

키프레임으로 동적효과를 위한 각 변화의 지점을 정의한 후 이 프레임들이 어떤식으로 연결되는지를 설정하는 애니메이션 속성을 정의해야 한다. 애니메이션 속성으로 애니메이션이 실행되는 시간, 반복 횟수, 변화의 정도, 프레임 연결 방향등을 지정하게 된다

 

-webkit-animation-name

키 프레임을 지정한다. 앞서 키프레임의 이름을 여기에 매핑 시킨다

 

-webkit-animation-duration

애니메이션이 실행되는 총 시간을 지정한다. 이 시간내에 키프레임이 연결되어 애니메이션이 실행된다
(기본 값: 0)

 

-webkit-animation-iteration-count

애니메이션의 반복횟수를 지정한다. 기본적로 키프레임은 시작~종료까지 한번만 실행된다
두번이상 실행하고 싶으면 이 속성에 반복하고자 하는 횟수를 지정하면 된다
만일 계속 실행(무한 실행)하고 싶을 경우 infinite 를 지정하면 된다 (기본 값: 1)

 

-webkit-animation-direction

키프레임의 연결 방향을 지정한다. 기본적으로 키프레임은 from(혹은 0%) ~ to(혹은 100%) 방향으로 연결된다. 만일 역방향으로의 연결을 원한다면 alternate 를 지정하면 된다 (기본 값: normal)

 

-webkit-animation-timing-function

키프레임간 변화의 정도를 지정한다. Transition의 그것과 동일하며 다음 글을 참고 바란다
(기본 값: ease) [CSS3] Transition

 

-webkit-animation-play-state

애니메이션의 실행 상태를 지정한다. running 와 paused 값이 있다(기본값: running)
애니메이션 실행 도중 일시정지, 재시작 시킬 경우 이용한다

 

-webkit-animation-delay

애니메이션이 시작되기 전 대기시간을 지정한다 (기본 값: 0, 즉시 시작)