• Q&A
  • 회원가입
  • 로그인

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

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.
아래 애니메이션 속성을 한번에 지정 가능한 단축코드 속성.

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state


주의: 

animation-duration 속성 항상 지정해야 함.

지정 안 하면, 이 속성의 기본값이 0 이라 동작 X


3.

기본값 : none 0 ease 0 1 normal none running

상속여부 : X

애니효과 : X

CSS버전 : CSS3

JS구문 : object.style.animation="homzzang 5s infinite"

 

4.

IE 10 이상 최신 주요 브라우저 지원.

5.
최초 지원한 구형 브라우저 위한 접두어

크롬, 사파리: -webkit-
파이어폭스: -moz-
오페라: -o-

 

6.
애니메이션 지원하는 CSS 속성 종류
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

 

 

 

animation 구문 

 

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

 


 

[속성값]

animation-name 

선택자에 연결할 키 프레임의 이름 지정.

animation-duration 
필수. 애니메이션 완료에 걸리는 시간 (초 또는 밀리 초) 지정.

 

animation-timing-function

애니메이션의 속도 곡선을 지정

 

animation-delay

애니메이션 시작 전 지연 지정.

 

animation-iteration-count

애니메이션 재생 횟수 지정.

 

animation-direction

애니메이션의 반복주기에서 역방향 재생 여부 지정

 

animation-fill-mode

실행시간 이외의 시간에 애니메이션에 적용되는 값 지정.
(즉, 애니메이션 실행 전, 실행 후 적용되는 값을 지정)

 

animation-play-state

애니메이션의 실행 여부 또는 일시 중지 여부를 지정.

 

initial

이 속성을 그것의 기본값으로 설정. 

 

inherit 
부모 요소에서 이 속성을 상속



오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012