@keyframes

정의 및 사용

css3를 이용하면 animation 효과를 낼 수 있는데,
animation 속성을 사용하기 위해선 먼저 @keyframes 사용 규칙에 대해서 알아야 한다.

@keyframes 규칙은 animation 을 어떤식으로 만들지에 대해 정의하는 것인데 플래시 모션의 키프레임을 안다면 쉽게 이해할 수 있다.
@keyframes 내부에 css 스타일을 정의하고 animation 은 “from”에 정의된 스타일에서 출발하여 “to”에 새롭게 정의된 스타일로 점차적으로 변화되는 것이다.

animation 이 진행되는 동안 css스타일은 여러 번 변경할 수 있다.
변화의 지점을 지정할 때 퍼센트 숫자와 비교하자면 o% 가 “from” 이며, 100%가 “to” 인 것이고
그 사이에 여러번 변화를 지정할려면 5% 25% 75%…등처럼 지정해주면 된다.
그리고 항상 0%(from)와 100%(to)값은 꼭 지정해주어야 한다.

브라우저 지원

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

크롬, 사파리에서는 -webkit- 접두사 사용

구문

속성

속성 값 설명
설명
animationname animation 의 이름을 지정
keyframes-selector animation 이 진행되는 동안의 각 퍼센트 값을 지정
0% ~ 100% = from ~ to
css-styles 변화될 스타일의 속성을 지정

예제 1 – from ~ to 를 사용할 경우

예제 2 – 퍼센트(%)값을 사용할 경우

버그 및 이슈

소제목

목록 으로

댓글