여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 애니메이션
w3.css – 애니메이션
3개월전 작성
4개월전 수정

w3.css

W3.CSS 애니메이션 클래스

W3.CSS 는 애니메이션 에 대해 다음 클래스를 제공한다.

Class Defines
w3-animate-top 상단에서 요소를 슬라이드한다(-300px ~ 0).
w3-animate-bottom 아래쪽에서 요소를 슬라이드한다(-300px ~ 0).
w3-animate-left 왼쪽(-300px에서 0까지)에서 요소를 슬라이드한다.
w3-animate-right 요소를 오른쪽(-300px에서 0까지)에서 슬라이드한다.
w3-animate-opacity 0.8초 안에 요소의 불투명도를 0에서 1로 애니메이션화한다.
w3-animate-zoom 크기가 0~100%인 요소에 애니메이션을 적용한다.
w3-animate-fading 요소의 불투명도를 0에서 1, 1에서 0으로 애니메이션화한다(페이드 인 + 페이드 아웃)
w3-spin 요소를 360도 회전한다.

상단 애니메이션

w3-animate-top 클래스는 요소를 맨 위에서(-300px에서 0까지) 슬라이드한다.

예제
<div class="w3-container">
  <h1 class="w3-center w3-animate-top">Animation is Fun!</h1>
</div>
기본 예시
예제 보기

하단 애니메이션

w3-animate-bottom 클래스는 아래쪽에서(-300px에서 0까지) 요소로 슬라이드된다.

예제
<div class="w3-container">
  <h1 class="w3-center w3-animate-bottom">Animation is Fun!</h1>
</div>
기본 예시
예제 보기

왼쪽 애니메이션

w3-animate-left 클래스는 요소를 왼쪽(-300px에서 0까지)에서 슬라이드한다.

예제
<div class="w3-container">
  <h1 class="w3-center w3-animate-left">Animation is Fun!</h1>
</div>
기본 예시
예제 보기

오른쪽 애니메이션

w3-animate-right 클래스는 오른쪽(-300px에서 0까지)에서 요소로 슬라이드된다.

예제
<div class="w3-container">
  <h1 class="w3-center w3-animate-right">Animation is Fun!</h1>
</div>
기본 예시
예제 보기

페이드 인 요소

w3-animate-opacity 클래스는 0.8초 안에 요소의 불투명도를 0에서 1로 애니메이션화한다.

w3-animate-opacity 클래스를 사용하여 요소를 페이드 인한다.

예제
<div class="w3-animate-opacity">..</div>
기본 예시
예제 보기

요소 확대

w3 -animate-zoom 클래스는 크기가 0에서 100%까지 요소에 애니메이션을 적용한다.

w3-animate-zoom 클래스 를 사용하여 요소를 확대한다.

예제
<div class="w3-animate-zoom">..</div>
기본 예시
예제 보기

스핀 요소

w3-spin 클래스는 요소를 360도 회전한다.

예제
<div class="w3-spin">..</div>
기본 예시
예제 보기

페이딩 인피니티

w3-animate-fading 클래스는 10초마다 (지속적으로) 요소를 페이드 인 및 페이드 아웃한다.

페이드 인 및 페이드 아웃 애니메이션

예제
<div class="w3-animate-fading">..</div>
기본 예시
예제 보기

모든 페이드

예제
<img class="w3-animate-top" src="img_01.jpg">
<img class="w3-animate-zoom" src="img_02.jpg">
<img class="w3-animate-left" src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그