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

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

บทที่ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ระหว่าง joomla กับ wordpress แตกต่างกันยังไงครับ
โดย aloha11x พ 13 พ.ย. 2019 2:12 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
1
137
พ 20 พ.ย. 2019 1:10 pm โดย mindphp
จะทำยังไงถึงจะแปลงวันที่ ให้อยู่ในรูปแบบของ universal date format ครับ
โดย bankjittapol พ 20 พ.ย. 2019 10:44 am บอร์ด Joomla Development
2
60
พ 20 พ.ย. 2019 6:24 pm โดย bankjittapol
งานประจำวันที่ 20 พฤศจิกายน 2562
โดย numtan5839 พ 20 พ.ย. 2019 10:10 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
34
พฤ 21 พ.ย. 2019 2:09 pm โดย numtan5839
list box เพื่อเลือกจังหวัดที่ต้องการให้แสดงผลพยากรณ์อากาศ
โดย bankjittapol อ 19 พ.ย. 2019 7:12 pm บอร์ด Joomla Developing Knowledge
0
34
อ 19 พ.ย. 2019 7:12 pm โดย bankjittapol
justify-content: space-between คำสั่ง flex ที่จะช่วยให้ระยะห่างแต่ละรูปเท่ากัน
โดย jamepiyawat อ 19 พ.ย. 2019 6:13 pm บอร์ด CSS Knowledge
0
26
อ 19 พ.ย. 2019 6:13 pm โดย jamepiyawat
วิธีการสร้าง form เมื่อกดปุ่ม โดยใช้ javascript
โดย Ittichai_chupol อ 19 พ.ย. 2019 6:09 pm บอร์ด Jquery & Ajax Knowledge
0
37
อ 19 พ.ย. 2019 6:09 pm โดย Ittichai_chupol
อยากทราบวิธีการ Link ปุ่ม
โดย numtan5839 อ 19 พ.ย. 2019 5:06 pm บอร์ด MindPHP News & Feedback
2
50
อ 19 พ.ย. 2019 5:50 pm โดย numtan5839
อยากทราบวิธีการปรับเปลี่ยนค่า ตัวแปร array ใน javascript
โดย Ittichai_chupol อ 19 พ.ย. 2019 5:19 pm บอร์ด JavaScript & Jquery Ajax
4
54
อ 19 พ.ย. 2019 6:02 pm โดย jamepiyawat
report ปัญหา รูปโปรไฟล์หาย
โดย chatee supasand พ 13 พ.ย. 2019 12:46 pm บอร์ด MindPHP News & Feedback
1
81
อ 19 พ.ย. 2019 11:18 am โดย thatsawan
report ปัญหา ไม่มีแจ้งเตือนเวลามีคนตอบกระทู้ของเรา
โดย chatee supasand พ 13 พ.ย. 2019 1:05 pm บอร์ด MindPHP News & Feedback
2
84
อ 19 พ.ย. 2019 11:16 am โดย thatsawan
อยากทราบวิธีการจัดรูปแบบ css ให้เรียงอยู่ใน บรรทัดเดียวตลอด ทั้งตอนย่อ หรือ ตอนเต็มจอ
โดย Ittichai_chupol อ 19 พ.ย. 2019 10:53 am บอร์ด HTML CSS
0
46
อ 19 พ.ย. 2019 10:53 am โดย Ittichai_chupol
งานประจำวันที่ 19 พฤศจิกายน 2562
โดย numtan5839 อ 19 พ.ย. 2019 10:19 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
3
17
อ 19 พ.ย. 2019 7:17 pm โดย numtan5839
แสงสีน้ำเงิน (Blue light) มีอันตราย ส่งผลกระทบต่อดวงตา
โดย taemmynatchapon ส 14 ก.ค. 2018 6:48 pm บอร์ด Share Knowledge
2
458
อ 19 พ.ย. 2019 4:10 pm โดย Busba1122
การทำ Link-List เพื่อใช้ในการเข้าถึงข้อมูลต่างๆได้ง่ายยิ่งขึ้น
โดย rangsan ส 05 พฤษภาคม 2018 1:49 pm บอร์ด Share Knowledge
1
846
อ 19 พ.ย. 2019 10:11 am โดย LEG
Internet (อินเทอร์เน็ต), Intranet(อินทราเน็ต), Extranet(เอกซ์ทราเน็ต) เชื่องโยงกันอย่างไร
โดย Patcharanan.0399 พ 25 เม.ย. 2018 3:38 pm บอร์ด Share Knowledge
1
2981
อ 19 พ.ย. 2019 10:10 am โดย LEG
สอน Fix Password Teamviewer Password จะได้ไม่ต้อง random
โดย M003 ศ 14 ธ.ค. 2012 12:03 pm บอร์ด Share Knowledge
2
17954
อ 19 พ.ย. 2019 10:09 am โดย LEG
วิธีฝัง Font ใน PowerPoint เพิ่มฟอร์นใน การนำเสนอ
โดย khwanchanok อ 21 พฤษภาคม 2019 6:41 pm บอร์ด Share Knowledge
1
272
อ 19 พ.ย. 2019 10:07 am โดย LEG
คีย์บอร์ดพังฉุกเฉิน แก้ขัดด้วย On-Screen Keyboard
โดย teenproza7 พฤ 16 พฤษภาคม 2019 7:31 pm บอร์ด Share Knowledge
1
257
อ 19 พ.ย. 2019 10:06 am โดย LEG
แก้คอมอืดด้วย Disk Cleanup
โดย teenproza7 จ 13 พฤษภาคม 2019 5:55 pm บอร์ด Share Knowledge
1
236
อ 19 พ.ย. 2019 10:06 am โดย LEG
สิ่งที่ต้องทำ ก่อนโทรศัพท์หายหรือโดนขโมย
โดย birdkritsna อ 17 ก.ย. 2019 3:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
144
อ 19 พ.ย. 2019 9:59 am โดย LEG