ภาพเคลื่อนไหว W3.CSS
แอนิเมชั่นสนุก!
คลาสแอนิเมชั่น W3.CSS
W3.CSS มีคลาสต่อไปนี้สำหรับแอนิเมชั่น:
ระดับ | กำหนด |
---|---|
w3-animate-top | เลื่อนในองค์ประกอบจากด้านบน (-300px ถึง 0) |
w3-animate-ด้านล่าง | เลื่อนในองค์ประกอบจากด้านล่าง (-300px ถึง 0) |
w3-animate-left | เลื่อนในองค์ประกอบจากด้านซ้าย (-300px ถึง 0) |
w3-animate-ใช่ | เลื่อนในองค์ประกอบจากด้านขวา (-300px ถึง 0) |
w3-animate-ทึบ | ทำให้ความทึบขององค์ประกอบเคลื่อนไหวจาก 0 ถึง 1 ใน 0.8 วินาที |
w3-animate-ซูม | ทำให้องค์ประกอบเคลื่อนไหวตั้งแต่ 0 ถึง 100% ในขนาด |
w3-เคลื่อนไหว-จางหาย | ทำให้ความทึบขององค์ประกอบเคลื่อนไหวตั้งแต่ 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 ถึง 1 ใน 0.8 วินาที
จางลงในองค์ประกอบด้วย คลาส w3-animate-opacity :
ตัวอย่าง
<div class="w3-animate-opacity">..</div>
ซูมเข้าองค์ประกอบ
คลาสw3-animate-zoomทำให้องค์ประกอบเคลื่อนไหวตั้งแต่ 0 ถึง 100%
ซูมองค์ประกอบด้วย คลาส w3-animate-zoom :
ตัวอย่าง
<div class="w3-animate-zoom">..</div>
Spin Elements
คลาสw3-spinหมุนองค์ประกอบ 360 องศา:
ตัวอย่าง
<div class="w3-spin">..</div>
Fading Infinite
คลาสw3-animate-fadingจะค่อยๆ เข้าและออกจากองค์ประกอบทุกๆ 10 วินาที (ต่อเนื่อง):
เคลื่อนไหว Fade In และ Out
ตัวอย่าง
<div class="w3-animate-fading">..</div>
Fade All
ตัวอย่าง
<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">