w3.css

W3.CSS 애니메이션 클래스

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

상단 애니메이션

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

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기