animation

정의 및 사용

animation 은 말그대로 요소에 동적인 변화 효과를 주어 웹페이지에 애니메이션 효과를 주는 것이다. transform 이나 transition 도 애니메이션 효과의 일종이지만 그것들은 단순이 요소의 변화만 일으키는 것이고 animation 은 요소의 변화를 시작점과 종료점 또 각 지점을 키프레임으로 제어할 수 있다는 것이다.

정의 및 사용
기본값 none 0 ease 0 1 normal
상속 no
버전 CSS3
자바스크립트 구문 object.style.animation=”mymove 5s infinite”

브라우저 지원

IE6 지원 안함IE7 지원 안함IE8 지원 안함Chrome 지원Firefox 지원Opera 지원 안함Safari 지원

파이어폭스, 크롬, 사파리에서만 접두사 사용시 지원

구문

속성

속성 값 설명
설명
animation-name 키프레임의 이름을 지정
animation-duration 애니메이션 효과가 완성될 시간을 초 단위로 지정
animation-timing-function 각 지점의 애니메이션 속도를 지정(transition-timing-function 과 같다)
animation-delay 애니메이션이 시작되기 전 대기 시간을 지정
animation-iteration-count 애니메이션의 반복 횟수를 지정
animation-direction 애니메이션의 진행방향을 지정 기본적으로 0~100%로 진행하고 역방향으로 지정한다면 100~0% 로 키프레임이 흐름

예제

버그 및 이슈

소제목

목록 으로

댓글