목차
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 5 s 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 상속 .
