15_animation

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

특정 요소에 애니메이트 효과를 적용할수 있다. 애니메이션 세부 속성을 지정한 @keyfames를 이용해 키프레임에서 변하는 속성값을 설정해서 애니메이션을 추가한다.

animation: <property> <duration> <timing-function> <delay>;

예시: animation: rotateBox 3s infinite ease;

속성 명	초기값	설명
animation-name	none	애니메이션 이름
animation-duration	Os	지속 시간(s, ms 단위 사용)
animation-timing-function	ease	속도변화 지정
animation-delay	Os	시작 전 지연 시간 지정
animation-iteration-count	1	반복 여부(숫자, infinite)
animation-direction	normal	방향(normal, reverse, alternate, alternate-reverse)
animation-fill-mode	none	실행 전과 후에 대상에 스타일을 적용방법(forwards,backwards,both)
animation-play-state	running	실행 여부 (paused, running)

@keyframes [animation-name] {
from { 속성 : 속성 값; }
50% {속성 속성 값; }
to { 속성: 속성 값; }
}

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

특정 요소에 애니메이트 효과를 적용할수 있다. 애니메이션 세부 속성을 지정한 @keyfames를 이용해 키프레임에서 변하는 속성값을 설정해서 애니메이션을 추가한다.

animation: <property> <duration> <timing-function> <delay>;

예시: animation: rotateBox 3s infinite ease;

속성 명	초기값	설명
animation-name	none	애니메이션 이름
animation-duration	Os	지속 시간(s, ms 단위 사용)
animation-timing-function	ease	속도변화 지정
animation-delay	Os	시작 전 지연 시간 지정
animation-iteration-count	1	반복 여부(숫자, infinite)
animation-direction	normal	방향(normal, reverse, alternate, alternate-reverse)
animation-fill-mode	none	실행 전과 후에 대상에 스타일을 적용방법(forwards,backwards,both)
animation-play-state	running	실행 여부 (paused, running)

@keyframes [animation-name] {
from { 속성 : 속성 값; }
50% {속성 속성 값; }
to { 속성: 속성 값; }
}