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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
อยากรู้วิธีใส่ Google Structure ใน Joomla ว่าใส่ตำแหน่งไหนและแก้ตรงไหนบ้างครับ
โดย Before Dong พฤ 21 ก.ย. 2017 2:20 pm บอร์ด Joomla Development
0
4
พฤ 21 ก.ย. 2017 2:20 pm โดย Before Dong
เมื่อ "ลูกค้า" บอกความต้องการของระบบ
โดย Before Dong พฤ 21 ก.ย. 2017 10:29 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
พฤ 21 ก.ย. 2017 10:29 am โดย Before Dong
oracle Sql loader
โดย jataz2 พ 20 ก.ย. 2017 5:13 pm บอร์ด SQL - Database
0
6
พ 20 ก.ย. 2017 5:13 pm โดย jataz2
ประกันสังคมพร้อมก้าวสู่ Digital SSO ไม่ต้องพกบัตรรับรองสิทธิ ตั้งแต่วันที่ 1 ม.ค. 61 เป็นต้นไป
โดย thatsawan พ 20 ก.ย. 2017 11:03 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
พ 20 ก.ย. 2017 11:03 am โดย thatsawan
เมื่อคุณประชุมทีมแล้ว ทีมไม่เข้าใจที่คุณพูด
โดย Before Dong พ 20 ก.ย. 2017 10:19 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พ 20 ก.ย. 2017 10:19 am โดย Before Dong
Joomla 3.8 มาแล้ว
โดย mindphp อ 19 ก.ย. 2017 9:14 pm บอร์ด PHP News
0
12
อ 19 ก.ย. 2017 9:14 pm โดย mindphp
สถานะสถานพยาบาลที่เข้าร่วมประกันสังคม 2560 อัพเดทล่าสุด
โดย thatsawan อ 19 ก.ย. 2017 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 19 ก.ย. 2017 11:32 am โดย thatsawan
ทุกปัญหาใหญ่สำหรับ "User" เสมอ!!
โดย Before Dong อ 19 ก.ย. 2017 10:16 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
อ 19 ก.ย. 2017 10:16 am โดย Before Dong
เจอ Process ไม่พึงประสงค์ ผังและรัน ภายใต้ /tmp ป้องกันไม่ใช้ รันไฟล์ใน tmp
โดย mindphp อ 19 ก.ย. 2017 7:52 am บอร์ด Linux - Web Server
0
11
อ 19 ก.ย. 2017 7:52 am โดย mindphp
ใครใช้ CCleaner เวอร์ชั่นเก่า อัพเกรดด่วน ให้ใหม่กว่า เวอร์ชัน 5.33
โดย mindphp อ 19 ก.ย. 2017 5:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
15
อ 19 ก.ย. 2017 5:29 am โดย mindphp
facebook มันมันบังคับให้ตั้งชื่อใหม่ ให้เป็นชื่อจริงๆ
โดย บุคคลทั่วไป อ 19 ก.ย. 2017 5:18 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
อ 19 ก.ย. 2017 5:18 am โดย บุคคลทั่วไป
สอบถามการประยุกต์ใช้คำสั่ง rect()
โดย Ik Kat จ 18 ก.ย. 2017 6:00 pm บอร์ด JavaScript & Jquery Ajax
0
17
จ 18 ก.ย. 2017 6:00 pm โดย Ik Kat
วิธีแก้ปัญหา Can't create/write to file '/tmp/#sql_6182_0.MAI' (Errcode: 2)
โดย mindphp จ 18 ก.ย. 2017 3:40 pm บอร์ด Linux - Web Server
0
11
จ 18 ก.ย. 2017 3:40 pm โดย mindphp
ทำ pop up ให้ login wordpress
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 1:26 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
21
จ 18 ก.ย. 2017 1:26 pm โดย บุคคลทั่วไป
ธุรกิจกระเป๋าเงินอิเล็กทรอนิกส์ หรือ e-Money คืออะไร
โดย M029 จ 18 ก.ย. 2017 11:46 am บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
0
17
จ 18 ก.ย. 2017 11:46 am โดย M029
สร้างฟอร์มรับข้อมูล แล้วส่งไปเก็บที่ phpmyadmin
โดย บุคคลทั่วไป จ 18 ก.ย. 2017 11:31 am บอร์ด Programming - PHP
0
22
จ 18 ก.ย. 2017 11:31 am โดย บุคคลทั่วไป
อยากจะเช็คเงื่อนไขไม่ให้เกิด error แบบนี้ EntityRef: expecting ';', ทำยังไงได้บ้างค่ะ
โดย thatsawan จ 18 ก.ย. 2017 11:28 am บอร์ด Programming - C/C++ & java & Python
4
32
จ 18 ก.ย. 2017 11:28 am โดย mindphp
ขั้นตอนที่ SA คิด ขั้นตอนที่ Programmer ทำ
โดย Before Dong จ 18 ก.ย. 2017 10:25 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
36
จ 18 ก.ย. 2017 10:25 am โดย P'Eak
selenium python คำสั่ง ใช้สำหรับ การค้นหา Elements บนหน้าเว็บ
โดย mindphp อ 17 ก.ย. 2017 4:53 am บอร์ด Python Knowledge
0
18
อ 17 ก.ย. 2017 4:53 am โดย mindphp
ตั้งค่า MX ของ mailgun เสริมจากบทความ
โดย mindphp ส 16 ก.ย. 2017 9:17 pm บอร์ด Linux - Web Server
1
17
ส 16 ก.ย. 2017 9:17 pm โดย P'Eak