W3.CSS 애니메이션
애니메이션은 재미있다!
W3.CSS 애니메이션 클래스
W3.CSS는 애니메이션에 대해 다음 클래스를 제공합니다.
| 등급 | 정의 |
|---|---|
| w3-애니메이션-탑 | 요소의 상단에서 슬라이드(-300px에서 0으로) |
| w3-animate-bottom | 요소의 아래쪽에서 슬라이드(-300px에서 0으로) |
| w3-애니메이션-왼쪽 | 요소를 왼쪽에서 슬라이드(-300px에서 0으로) |
| w3-animate-right | 오른쪽에서 요소 슬라이드(-300px에서 0으로) |
| w3-애니메이션-불투명도 | 0.8초 만에 요소의 불투명도를 0에서 1로 애니메이션 |
| w3 애니메이트 줌 | 크기가 0%에서 100% 사이인 요소에 애니메이션 효과를 줍니다. |
| w3-애니메이션 페이딩 | 요소의 불투명도를 0에서 1로, 1에서 0으로 애니메이션을 적용합니다(페이드 인 + 페이드 아웃). |
| w3-스핀 | 요소를 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">