목차
- animation 예제 - 애니효과 일괄 지정
- animation 정의
- animation 구문
animation 예제 - 애니효과 일괄 지정
<style>
div {
width: 100px;
height: 100px;
background: blue;
position: relative;
-webkit-animation: hz 5s infinite; /* Safari 4.0 - 8.0 */
animation: hz 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes hz {
from {left: 0px;}
to {left: 100px;}
}
@keyframes hz {
from {left: 0px;}
to {left: 100px;}
}
</style>
<h1>홈짱닷컴 Homzzaang.com</h1>
<div></div>
결과 보기
animation 정의
아래 애니메이션 효과 속성을 일괄 지정 가능한 단축속성.
1. (예제)
div {animation: homzzang 5s infinite;}
2.
- 기본값 : none 0 ease 0 1 normal none running
- 상속여부 : X
- 애니가능 : X
- CSS버전 : CSS3
- JS구문 : object.style.animation="homzzang 5s infinite";
3.
- IE10 이상 주요 초신브라우저 지원.
- 구형 브라우저 경우, (크롬, 사파리: -webkit- / 파이어폭스: -moz- / 오페라: -o-) 접두어 필요.
4. MDN animation 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
5. 애니메이션 지원하는 CSS 속성 종류
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
animation 구문
selector {animation: name duration timing-function delay iteration-count direction fill-mode play-state|iinitial|inherit;}
[속성값]
animation-name
선택자에 연결할 키 프레임의 이름 지정.
animation-duration
필수. 애니메이션 완료에 걸리는 시간 (초 또는 밀리 초) 지정.
animation-timing-function
애니메이션의 속도 곡선을 지정
animation-delay
애니메이션 시작 전 지연 지정.
animation-iteration-count
애니메이션 재생 횟수 지정.
animation-direction
애니메이션의 반복주기에서 역방향 재생 여부 지정
animation-fill-mode
실행시간 이외의 시간에 애니메이션에 적용되는 값 지정.
(즉, 애니메이션 실행 전, 실행 후 적용되는 값을 지정)
animation-play-state
애니메이션의 실행 여부 또는 일시 중지 여부를 지정.
initial
이 속성을 그것의 기본값으로 설정.
inherit
부모 요소에서 이 속성을 상속.
