บทที่ 9 CSS3 Animations ตอน 2
    นอกจากนี้แล้ว CSS3 Animations ยังมีคำสั่งต่างๆอีก (properties) ซึ่งจะช่วยเพิ่มลูกเล่นให้ที่หลากหลายกับ  Animations ได้ ดังนี้

properties               
คำอธิบาย
1 @keyframes คำสั่งในการสร้างภาพ Animations

2 animation-name ชื่อของรูป Animations

3 animation-duration ระยะเวลาของการเคลื่อนไหว จาก ต้นทาง ไป ปลายทาง

4 animation-timing-function รูปแบบการเล่นใน 1 รอบของการเคลื่อนไหว

5 animation-delay เวลาก่อนเริ่มแสดงภาพ เช่น 2s คือต้องรอ 2 วินาทีภาพจึงจะเริ่มแสดง

6 animation-iteration-count รอบในการแสดง สามรถใส่เป็นตัวเลขแทนจำนวนรอบ หรือใส่ infinite หากต้องการให้เล่นไปเรื่อยๆ ไม่มีหยุด

7 animation-direction ควบคุมทิศทางในการเคลื่อนที่ของ ภาพ Animations เช่น alternate คือการเคลื่อนที่ไปและย้อนกลับในทิศทางเดิม
และ normal คือการเคลื่อนที่ไปและกลับมาเริ่มใหม่ที่จุดเริ่มต้น

8 animation-play-state ใช้ในการตั้งค่า การแสดงภาพ Animations โดยสามารถสั่งให้ เล่น (running) หรือ (paused)


 ตัวอย่างเช่น

<html>
<head>
<style> 
div
{width:100px;
height:100px;
background:yellow;
position:relative;

animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;

/* Firefox: */
-moz-animation-name:myfirst;
-moz-animation-duration:5s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;

/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;

/* Opera: */
-o-animation-name:myfirst;
-o-animation-duration:5s;
-o-animation-timing-function:linear;
-o-animation-delay:2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:alternate;
-o-animation-play-state:running;}

@keyframes myfirst
{0%   {background:yellow; left:0px; top:0px;}
25%  {background:red; left:200px; top:0px;}
100%  {background:pink; left:200px; top:200px;}}

@-moz-keyframes myfirst /* Firefox */
{0%   {background:yellow; left:0px; top:0px;}
25%  {background:red; left:200px; top:0px;}
100%  {background:pink; left:200px; top:200px;}}

@-webkit-keyframes myfirst /* Safari and Chrome */
{0%   {background:yellow; left:0px; top:0px;}
25%  {background:red; left:200px; top:0px;}
100%  {background:pink; left:200px; top:200px;}}

@-o-keyframes myfirst /* Opera */
{0%   {background:yellow; left:0px; top:0px;}
25%  {background:red; left:200px; top:0px;}
100%  {background:pink; left:200px; top:200px;}}
</style>
</head>
<body>

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

<div></div>

</body>
</html>


ผลลัพธ์คือ

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


ข้อมูลอ้างอิง
http://www.comsci.in.th/
http://www.w3schools.com

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
แนะนำ ISD1820 โมดูลบันทึกเสียง Arduino ใช้ได้กับ ESP8266 ESP32
โดย mindphp อ 31 ธ.ค. 2023 8:02 pm บอร์ด IOT - Internet of things
0
1356
อ 31 ธ.ค. 2023 8:02 pm โดย mindphp View Topic แนะนำ ISD1820 โมดูลบันทึกเสียง Arduino ใช้ได้กับ ESP8266 ESP32
ทำไมทำ Wordpress บน localwp มันช้าครับ ช้ากว่าทำบนโฮสต์จริง
โดย Anonymous อ 31 ธ.ค. 2023 4:20 pm บอร์ด สอบถามปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
0
306
อ 31 ธ.ค. 2023 4:20 pm โดย บุคคลทั่วไป View Topic ทำไมทำ Wordpress บน localwp มันช้าครับ ช้ากว่าทำบนโฮสต์จริง
ลดหย่อนภาษีได้ปี 67 สูงสุด 50,000 มีเงือนไขอย่างไรมาดุ
โดย Anonymous อ 31 ธ.ค. 2023 10:37 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
395
อ 31 ธ.ค. 2023 10:37 am โดย บุคคลทั่วไป View Topic ลดหย่อนภาษีได้ปี 67 สูงสุด 50,000 มีเงือนไขอย่างไรมาดุ
เซ็นเซอร์ตรวจจับเสียง เอาไปใช้ทำอะไรได้บ้าง ทำโปรเจ็ค IOT
โดย Anonymous ส 30 ธ.ค. 2023 4:28 am บอร์ด IOT - Internet of things
2
765
ส 30 ธ.ค. 2023 10:48 pm โดย mindphp View Topic เซ็นเซอร์ตรวจจับเสียง เอาไปใช้ทำอะไรได้บ้าง ทำโปรเจ็ค IOT
มีเว็บที่เปิดเป็น localhost ใช้งานได้อยู่ มีวิธีไหนบ้างครับ ที่จะทำให้คนเข้าถึงออนไลน์ได้
โดย Anonymous ส 30 ธ.ค. 2023 4:18 am บอร์ด Programming - PHP
1
322
ส 30 ธ.ค. 2023 10:47 pm โดย mindphp View Topic มีเว็บที่เปิดเป็น localhost ใช้งานได้อยู่ มีวิธีไหนบ้างครับ ที่จะทำให้คนเข้าถึงออนไลน์ได้
ในฐานะผู้ดูแลระบบ (System Administrator) ก่อนเข้าช่วงหยุดยาว เตรียมตัวแบบนี้เพื่อให้หยุดได้อย่างไร้กังวน
โดย mindphp พฤ 28 ธ.ค. 2023 12:20 pm บอร์ด Linux - Web Server
0
572
พฤ 28 ธ.ค. 2023 12:20 pm โดย mindphp View Topic ในฐานะผู้ดูแลระบบ (System Administrator) ก่อนเข้าช่วงหยุดยาว เตรียมตัวแบบนี้เพื่อให้หยุดได้อย่างไร้กังวน
แก้ปัญหา Google Chrome เข้าหน้าเว็บไม่ได้ขึ้น ERROR SSL Key แต่ใช้ browser ตัวอื่นเข้าได้หมด
โดย mindphp พฤ 28 ธ.ค. 2023 7:11 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
348
พฤ 28 ธ.ค. 2023 7:11 am โดย mindphp View Topic แก้ปัญหา Google Chrome เข้าหน้าเว็บไม่ได้ขึ้น ERROR SSL Key แต่ใช้ browser ตัวอื่นเข้าได้หมด
ทำไมการย้ายโดเมนมักแนะนำให้ดำเนินการก่อนหมดอายุ 30 วัน มาดูรายละเอียดกัน Domain Tranfer มีกี่ขั้นตอน
โดย mindphp พฤ 28 ธ.ค. 2023 6:54 am บอร์ด Microsoft Office Knowledge & line & Etc
0
423
พฤ 28 ธ.ค. 2023 6:54 am โดย mindphp View Topic ทำไมการย้ายโดเมนมักแนะนำให้ดำเนินการก่อนหมดอายุ 30 วัน มาดูรายละเอียดกัน Domain Tranfer มีกี่ขั้นตอน