ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การใช้ text-align เพื่อจัดข้อความ
โดย bankjittapol ศ 22 พ.ย. 2019 6:28 pm บอร์ด CSS Knowledge
0
3
ศ 22 พ.ย. 2019 6:28 pm โดย bankjittapol
อยากทราบคำสั่ง joomla ที่จะทำให้ย่อยรูปได้ครับ
โดย jamepiyawat ศ 22 พ.ย. 2019 5:53 pm บอร์ด Joomla Development
0
5
ศ 22 พ.ย. 2019 5:53 pm โดย jamepiyawat
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก
โดย Ittichai_chupol ศ 22 พ.ย. 2019 5:41 pm บอร์ด Jquery & Ajax Knowledge
0
3
ศ 22 พ.ย. 2019 5:41 pm โดย Ittichai_chupol
การใส่ Intro Outro และการตัดต่อ VDO ด้วยโปรแกรม โปรแกรม Sony Vagas Pro
โดย numtan5839 ศ 15 พ.ย. 2019 1:41 pm บอร์ด Graphic design
0
6
ศ 15 พ.ย. 2019 1:41 pm โดย numtan5839
ข้อดีข้อเสียของ SAP
โดย kanchanok พฤ 05 เม.ย. 2018 9:31 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
2220
ศ 22 พ.ย. 2019 4:57 pm โดย mindphp
วิธีการเปลี่ยนการแสดงผล ส่วนการจัดการกระทู้ที่ติดตาม ของ phpbb
โดย Ittichai_chupol ศ 22 พ.ย. 2019 4:07 pm บอร์ด PHP Knowledge
0
5
ศ 22 พ.ย. 2019 4:07 pm โดย Ittichai_chupol
.net ถ้าจะใช้ Entity Framework โดยไม่ต้องลงตัว Oracle Data Access Client (ODAC)
โดย jataz2 ศ 22 พ.ย. 2019 3:23 pm บอร์ด Programming - C/C++ & java & Python
0
9
ศ 22 พ.ย. 2019 3:23 pm โดย jataz2
โปรแกรมหาค่าเฉลี่ย, ค่าแปรปรวน และค่าเบี่ยงเบนมาตรฐาน
โดย prmindphp ศ 22 พ.ย. 2019 10:40 am บอร์ด MindPHP News / Feedback
0
17
ศ 22 พ.ย. 2019 10:40 am โดย prmindphp
โปรแกรมคำนวณสแควรูท - โปรแกรมช่วยหาค่า รากที่ สอง สาม สี่... ของจำนวนที่ต้องการ
โดย prmindphp ศ 22 พ.ย. 2019 10:23 am บอร์ด MindPHP News / Feedback
0
37
ศ 22 พ.ย. 2019 10:23 am โดย prmindphp
พาสปอร์ตด่วนพิเศษ บินไวไฟลุก จ่าย 3,000.- รับเล่มภายในไม่กี่ชั่วโมง
โดย promotion ศ 22 พ.ย. 2019 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ศ 22 พ.ย. 2019 10:19 am โดย promotion
งานประจำวันที่ 22 พฤศจิกายน 2562
โดย numtan5839 ศ 22 พ.ย. 2019 9:36 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
6
24
ศ 22 พ.ย. 2019 6:58 pm โดย numtan5839
บันทึกการประชุม OpenERP MD-ERP
โดย rinrada ส 04 ก.พ. 2017 11:52 am บอร์ด OpenERP - MD-ERP (Main)
26
173
พฤ 21 พ.ย. 2019 6:56 pm โดย thatsawan
การใช้ ฟังก์ชัน hsl() และ hsal () กำหนดค่าของสี
โดย bankjittapol พฤ 21 พ.ย. 2019 6:55 pm บอร์ด CSS Knowledge
0
24
พฤ 21 พ.ย. 2019 6:55 pm โดย bankjittapol
วิธีการแยกตัวอักษรเข้าอาร์เรย์ (Array) แต่ล่ะอาร์เรย์ ด้วยคำสั่ง split
โดย jamepiyawat พฤ 21 พ.ย. 2019 6:50 pm บอร์ด Jquery & Ajax Knowledge
0
20
พฤ 21 พ.ย. 2019 6:50 pm โดย jamepiyawat
วิธีการดึงค่าเฉพาะค่าสุดท้ายของ class แม้ว่าจะมี class ชื่อเหมือนกัน หลายคลาส โดย javascript
โดย Ittichai_chupol พฤ 21 พ.ย. 2019 6:39 pm บอร์ด Jquery & Ajax Knowledge
0
27
พฤ 21 พ.ย. 2019 6:39 pm โดย Ittichai_chupol
การติดตั้ง wkhtmltopdf ด้วย terminal บน ubuntu
โดย jirawoot พฤ 27 มิ.ย. 2019 4:00 pm บอร์ด Linux - Web Server
3
719
พฤ 21 พ.ย. 2019 2:49 pm โดย mindphp
การปรับแก้ไข(Overrides) Modules ใน Template
โดย bankjittapol พฤ 21 พ.ย. 2019 2:36 pm บอร์ด Joomla Developing Knowledge
0
19
พฤ 21 พ.ย. 2019 2:36 pm โดย bankjittapol
wkhmtltopdf คืออะไร
โดย jirawoot พ 03 ก.ค. 2019 6:35 pm บอร์ด Share Knowledge
1
229
พฤ 21 พ.ย. 2019 2:34 pm โดย mindphp
อัพเกรด wkhtmltopdf บน Ubuntu 16.04
โดย mindphp พฤ 21 พ.ย. 2019 2:33 pm บอร์ด Linux - Web Server
0
18
พฤ 21 พ.ย. 2019 2:33 pm โดย mindphp
VDO - โปรแกรมแปลงพื้นที่
โดย numtan5839 พฤ 21 พ.ย. 2019 1:59 pm บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
4
29
ศ 22 พ.ย. 2019 6:40 pm โดย numtan5839