[animation] CSS - animation 속성 ★ - 애니메이션 단축속성 (= animation속성 = 애니메이션속성, IE10) ※ 움직임효과/이동효과/애니일괄/애니효과

1. animation 예제 - 애니효과 일괄 지정
2. animation 정의
3. 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 정의

 

아래 애니메이션 효과 속성을 일괄 지정 가능한 단축속성.

• animation-name 속성 - 애니 '키프레임즈 이름' 지정
• animation-duration 속성 - 애니 지속시간 지정. (필수. 미지정 시, 이 속성의 기본값이 '0'이라 동작 X)
• animation-timing-function 속성 - 애니 재생 중 속도변화 지정.
• animation-delay 속성 - 애니 작동대기시간(=실행지연시간) 지정.
• animation-iteration-count 속성 - 애니 반복횟수 지정.
• animation-direction 속성 - 애니 방향 지정.
• animation-fill-mode 속성 - 애니 작동 안 할 때 모드 지정.
• animation-play-state 속성 - 애니 재생 상태 지정.

 

---

 

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 
부모 요소에서 이 속성을 상속.