• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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 정의

 

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

 


 

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


 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro CSS - 정의・장점・구문・초기화 + 주석
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS) + 제작관리 단체
intro CSS - 스타일 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 +…
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자, class선택자 + CSS우선순위 ★★★ (= 아이디선택자, 클래스선택자, CSS명시…
selector CSS - * 전체선택자 - 모든 요소 선택. (요소선택자군) ※ 아스테리크 (asterisk) 선택자 = …
selector CSS - element 요소선택자 ★ - 지정 요소 선택. (요소선택자군)
selector CSS - element,element 병렬선택자 ★ - 쉼표로 나열된 여러 요소 선택. (= 여러 요소선택…
selector CSS - element element 자손선택자 ★ - 자손요소 (요소선택자)
selector CSS - element>element 자식선택자 ★ - 직접 자식요소만 선택. (요소선택자, IE7)
selector CSS - element+element 인접선택자 ★★ - 바로 뒤 인접형제요소 (요소선택자, IE7) + …
selector CSS - element~element 형제선택자 ★★ - 지정요소 뒤의 모든 특정형제요소 (요소선택자군…
selector CSS - [attribute] 속성선택자 - 특정 속성 보유 요소 (IE7) ※ 여러 속성 보유 선택자
selector CSS - [attribute=value] 속성선택자 - 지정속성값보유요소 선택 (IE7) ※ 특정 (속성/…
1/25
목록
찾아주셔서 감사합니다. Since 2012