ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 9 CSS3 Animations ตอน 1
   CSS3 Animations คือการสร้างภาพเคลื่อนไหว (Animations) โดยไม่ต้องใช้ Flash animations และ  JavaScripts โดยในการสร้างภาพเคลื่อนไหวนั้นต้องใช้คำสั่ง @keyframes  (CSS3 Animations ไม่สามารถใช้กับ Internet Explorer)
ตัวอย่าง
   1.Animations แบบเคลื่อนที่ในทิศทางต่างๆ ตัวอย่างเช่น

<html>
    <head>
        <style>
div
{width:100px;
height:100px;
background:pink;
position:relative;
animation:mytest 5s infinite;
-moz-animation:mytest 5s infinite; /*Firefox*/
-webkit-animation:mytest 5s infinite; /*Safari and Chrome*/
-o-animation:mytest 5s infinite; /*Opera*/}
 
@keyframes mytest
{from {left:0px;}
to {left:400px;}}
 
@-moz-keyframes mytest /*Firefox*/
{from {left:0px;}
to {left:400px;}}
 
@-webkit-keyframes mytest /*Safari and Chrome*/
{from {left:0px;}
to {left:400px;}}
 
@-o-keyframes mytest /*Opera*/
{from {left:0px;}
to {left:400px;}}
</style>

<p> This example does not work in Internet Explorer.</p>
 
    </head>
    <body>
        <div><center>Hello Nerd</center></div>
    </body>
</html>

ผลลัพธ์คือ

ดูตัวอย่างที่ 3 คลิกที่นี่

คำอธิบาย
{width:ความกว้างของสี่เหลี่ยม;
height:ความสูงของสี่เหลี่ยม;
background:สีของรูปสี่เหลี่ยม;
position:relative; (ใส่คำสั่งนี้เพื่อให้สี่เหลี่ยมมีการเคลื่อนที่)
animation:mytest เวลาที่รูปสี่เหลี่ยมใช้ในการเคลื่อนที่ (ในตัวอย่างใช้เป็น 5s ซึ่งหมายถึง 5 วินาที) infinite; 
(สำหรับในคำสั่งนี้ หากไม่ต้องการให้รูปสี่เหลี่ยมมีการเคลื่อนที่ซ๊ำไปซ๊ำมา ก็ให้ลบคำว่า infinite ออก

-moz-animation:mytest 5s infinite; /*Firefox*/
-webkit-animation:mytest 5s infinite; /*Safari and Chrome*/
-o-animation:mytest 5s infinite; /*Opera*/}

โดย -moz- เป็นของ Firefox  -webkit- เป็นของ Safari and Chrome  และ -o- เป็นของ Opera

@keyframes mytest
{from {left:ตำแหน่งเริ่มต้นเคลื่อนที่;}
to {left:ตำแหน่งสิ้นสุดการเคลื่อนที่;}}

ในตัวอย่างคือเคลื่อนที่
เริ่มจากตำแหน่ง 0px และ สิ้นสุดที่ตำแหน่ง 400px
คำสั่ง left คือเคลื่อนที่จากซ้ายไปขวา สามารถเปลี่ยนเป็น
bottom (เคลื่อนที่จากล่างขึ้นบน) , top (เคลื่อนที่จากบนลงล่าง) และ  right (เคลื่อนที่จากขวาไปซ้าย) ได้ เพื่อเปลี่ยนทิศทางการเคลื่อนที่

2.
Animations แบบเปลี่ยนสี ตัวอย่างเช่น

<html>
<head>
<style> 
div
{width:100px;
height:100px;
background:pink;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */}

@keyframes myfirst
{from {background:pink;}
to {background:blue;}}

@-moz-keyframes myfirst /* Firefox */
{from {background:pink;}
to {background:blue;}}

@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:pink;}
to {background:blue;}}

@-o-keyframes myfirst /* Opera */
{from {background:pink;}
to {background:blue;}}
</style>
</head>
<body>

<p> This example does not work in Internet Explorer.</p>

<div><center>Hello Nerd</center></div>

</body>
</html>

ผลลัพธ์คือ

ดูตัวอย่างที่ 4 คลิกที่นี่

คำอธิบาย
{width:ความกว้างของรูปสี่เหลี่ยม;
height:ความสูงของรูปสี่เหลี่ยม;
background:สีของรูปสี่เหลี่ยม;
animation:myfirst เวลาที่ใช้ในการเปลี่ยนสี
ในตัวอย่างใช้เป็น 5s ซึ่งหมายถึง 5 วินาที) infinite; (สำหรับในคำสั่งนี้ หากไม่ต้องการให้รูปสี่เหลี่ยมมีการสีซ๊ำไปซ๊ำมา ก็ให้ลบคำว่า infinite ออก

-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */}

โดย -moz- เป็นของ Firefox  -webkit- เป็นของ Safari and Chrome  และ -o- เป็นของ Opera

@keyframes myfirst
{from {background:สีเริ่มต้น;}
to {background:สีสุดท้าย;}}

ในตัวอย่างคือเริ่มต้นจากสีชมพู แล้วค่อยๆเปลี่ยนเป็นสีน้ำเงิน


อ่านเพิ่มเติม
บทที่ 9 CSS3 Animations ตอน 2
บทที่ 9 CSS3 Animations ตอน 3

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธี ตรวจสอบ DNS nameserver แบบง่ายๆ
โดย aninthana ส 24 ส.ค. 2019 3:33 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
6
ส 24 ส.ค. 2019 3:33 pm โดย aninthana
วิธีประมาณการรายได้-ค่าใช้จ่ายครึ่งปีหลัง มีวิธีประมาณการยังไง
โดย EyePornnipa ส 24 ส.ค. 2019 3:19 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
11
ส 24 ส.ค. 2019 3:45 pm โดย Amp_Audit
มีวิธีกำหนดภาพ เป็นแนวนอนไหมครับ แล้วก็ ถ้าภาพเกิน 4 ภาพให้ลงมาอีกบรรทัดนึงครับ
โดย Patipat ส 24 ส.ค. 2019 1:53 pm บอร์ด HTML CSS
2
9
ส 24 ส.ค. 2019 2:18 pm โดย Patipat
Q - ทำไมหน้าตั้งค่าของ MDFiles Categories ใช้งานไม่ได้ครับ
โดย Patipat ส 24 ส.ค. 2019 11:31 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
7
ส 24 ส.ค. 2019 11:31 am โดย Patipat
ใบสำคัญที่กรมสรรพากรยอมรับ มีอะไรบ้าง
โดย EyePornnipa ส 24 ส.ค. 2019 11:21 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
1
20
ส 24 ส.ค. 2019 11:36 am โดย Amp_Audit
งานประจำวันที่ 24 สิงหาคม 2562
โดย Patipat ส 24 ส.ค. 2019 10:25 am บอร์ด M088 - ปฏิภัทร สารธรรม
0
4
ส 24 ส.ค. 2019 10:25 am โดย Patipat
งานประจำวันที่ 24 สิงหาคม 2562
โดย jamepiyawat ส 24 ส.ค. 2019 10:19 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
6
ส 24 ส.ค. 2019 10:19 am โดย jamepiyawat
งานประจำวันที่ 24 สิงหาคม 2562
โดย EyePornnipa ส 24 ส.ค. 2019 10:10 am บอร์ด M089 - นางสาวพรนิภา ราชธานี
2
18
ส 24 ส.ค. 2019 2:30 pm โดย EyePornnipa
งานประจำวันที่ 24 สิงหาคม 2562
โดย jirawoot ส 24 ส.ค. 2019 10:03 am บอร์ด M090 - นายจิระวุฒิ อัครลิขิตกุล
0
3
ส 24 ส.ค. 2019 10:03 am โดย jirawoot
งานประจำวันที่ 24 สิงหาคม 2562
โดย aninthana ส 24 ส.ค. 2019 9:50 am บอร์ด M092 - อนินธนา บุญยัง
1
13
ส 24 ส.ค. 2019 12:28 pm โดย mindphp
เขียนรายละเอียดของคำถาม
โดย พิ๊แบงค์ซ๊า ศ 23 ส.ค. 2019 11:03 pm บอร์ด Programming - PHP
0
5
ศ 23 ส.ค. 2019 11:03 pm โดย พิ๊แบงค์ซ๊า
ประเภทหน้ารายงานงบการเงิน
โดย EyePornnipa ศ 23 ส.ค. 2019 6:30 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
1
11
ส 24 ส.ค. 2019 2:10 pm โดย EyePornnipa
Android Q ได้ชื่อใหม่แล้ว ไม่ใช่ชื่อขนม แต่เป็น "Android 10" มีเปลี่ยนโลโก้ด้วย
โดย aninthana ศ 23 ส.ค. 2019 5:49 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
13
ศ 23 ส.ค. 2019 5:49 pm โดย aninthana
สอบถาม ถ้าลงไพทอน เวอร์ชั่นใหม่ เดิมใช้เวอร์ชั่นเก่าอยู่ จะเป็นยังไงครับ
โดย chatee supasand ศ 23 ส.ค. 2019 5:49 pm บอร์ด Programming - C/C++ & java & Python
1
18
ศ 23 ส.ค. 2019 5:52 pm โดย tatiya
ดีไซต์ใหม่ Google Play Store เน้นสีขาว
โดย jamepiyawat ศ 23 ส.ค. 2019 5:48 pm บอร์ด Share Knowledge
0
9
ศ 23 ส.ค. 2019 5:48 pm โดย jamepiyawat
วีธีการดาวน์โหลดวีดีโอด้วยลิ้ง url โดยการใช้ requests
โดย jirawoot ศ 23 ส.ค. 2019 5:46 pm บอร์ด Python Knowledge
0
19
ศ 23 ส.ค. 2019 5:46 pm โดย jirawoot
ฟีเจอร์ Template MZC_
โดย Patipat ศ 23 ส.ค. 2019 4:59 pm บอร์ด M088 - ปฏิภัทร สารธรรม
1
11
ศ 23 ส.ค. 2019 5:12 pm โดย Patipat
B - ปรับ Template opencart
โดย jamepiyawat ศ 23 ส.ค. 2019 5:02 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
0
5
ศ 23 ส.ค. 2019 5:02 pm โดย jamepiyawat
ฟีเจอร์ Template MooZiiOpencart
โดย jamepiyawat ศ 23 ส.ค. 2019 4:42 pm บอร์ด M084 - นายปิยวัช เชาว์วิมล
2
13
ศ 23 ส.ค. 2019 5:36 pm โดย jamepiyawat
ใบแจ้งหนี้รูปแบบต่างๆ
โดย EyePornnipa ศ 23 ส.ค. 2019 3:51 pm บอร์ด M089 - นางสาวพรนิภา ราชธานี
8
41
ส 24 ส.ค. 2019 4:21 pm โดย EyePornnipa