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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
การทำตัว Check Box ใน Google Sheets
โดย Chidchanok อ 22 ม.ค. 2019 12:22 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
2
อ 22 ม.ค. 2019 12:22 pm โดย Chidchanok
[Extension phpBB3.1.1] Set forum width Extension เป็นการตั้งค่าความกว้างฟอรัม
โดย จันนุสรณ์ ดีแก่ อ 22 ม.ค. 2019 11:33 am บอร์ด phpBB 3.1 Extension Review
0
1
อ 22 ม.ค. 2019 11:33 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] Activity Buttons - Quick Links Into Header Extension ปุ่มกิจกรรมต่างๆ
โดย จันนุสรณ์ ดีแก่ อ 22 ม.ค. 2019 10:49 am บอร์ด phpBB 3.1 Extension Review
0
4
อ 22 ม.ค. 2019 10:49 am โดย จันนุสรณ์ ดีแก่
R - Guide สำหรับ Migrate ข้อมูล
โดย tsukasaz จ 21 ม.ค. 2019 6:03 pm บอร์ด สิริกิตติรัตน์ - Developer
0
2
จ 21 ม.ค. 2019 6:03 pm โดย tsukasaz
ต้นเดือน Vs ปลายเดือน
โดย จันนุสรณ์ ดีแก่ จ 21 ม.ค. 2019 1:54 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
12
จ 21 ม.ค. 2019 1:54 pm โดย จันนุสรณ์ ดีแก่
ลายเซนต์คืออะไร การตั้งค่าข้อมูลส่วนตัว (แก้ไขลายเซนต์) วิธีการเพิ่มลายเซนต์
โดย จันนุสรณ์ ดีแก่ จ 21 ม.ค. 2019 11:42 am บอร์ด phpBB user Guide Knowledge
0
12
จ 21 ม.ค. 2019 11:42 am โดย จันนุสรณ์ ดีแก่
Bill of Material (BOM) คืออะไร
โดย ณัฐกฤตา บุญญะฤทธิ์ จ 21 ม.ค. 2019 11:38 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
10
จ 21 ม.ค. 2019 11:38 am โดย ณัฐกฤตา บุญญะฤทธิ์
[Extension phpBB3.1.1]Project Durango Extension เทมเพลสในรูปแบบสีเขียว
โดย จันนุสรณ์ ดีแก่ จ 21 ม.ค. 2019 11:02 am บอร์ด phpBB 3.1 Extension Review
0
11
จ 21 ม.ค. 2019 11:02 am โดย จันนุสรณ์ ดีแก่
[Extension phpBB3.1.1] Page Scrolling Extension ช่วยในการเลื่อนหน้า บนสุดและล่างสุด
โดย จันนุสรณ์ ดีแก่ จ 21 ม.ค. 2019 10:35 am บอร์ด phpBB 3.1 Extension Review
0
13
จ 21 ม.ค. 2019 10:35 am โดย จันนุสรณ์ ดีแก่
Q-ไม่สามารถ กด Save สินค้าได้
โดย Chidchanok จ 21 ม.ค. 2019 10:16 am บอร์ด M.D.Soft Co.,Ltd. - Tester
5
18
จ 21 ม.ค. 2019 11:07 am โดย Chidchanok
แก้ปัญหา ติดตั้ง โปรแกรมด้วย dpkg -i , apt-get deb
โดย mindphp จ 21 ม.ค. 2019 3:37 am บอร์ด Linux - Web Server
0
11
จ 21 ม.ค. 2019 3:37 am โดย mindphp
Manual (คู่มือ) คืออะไร Work Manual เเละ User Manual ต่างกันอย่างไร
โดย thatsawan จ 21 ม.ค. 2019 1:20 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
จ 21 ม.ค. 2019 1:20 am โดย thatsawan
รบกวนดูข้อผิดพลาดของการ login ให้หน่อยค่ะ
โดย Anonymous อ 20 ม.ค. 2019 7:32 pm บอร์ด Programming - PHP
2
43
จ 21 ม.ค. 2019 6:34 pm โดย aquanaan
TIP WITH RECURSIVE ดึงข้อมูล มาแสดง
โดย mindphp อ 20 ม.ค. 2019 5:24 pm บอร์ด PostgreSQL
0
6
อ 20 ม.ค. 2019 5:24 pm โดย mindphp
สรุปการเรียนรู้วิธีการใช้งาน php เว็บบอร์ด
โดย praphasri อ 03 ก.ค. 2018 3:12 pm บอร์ด phpBB user Guide Knowledge
0
5
อ 03 ก.ค. 2018 3:12 pm โดย praphasri
วิธีการคำนวณภาษีที่บริษัทออกให้
โดย praphasri จ 02 ก.ค. 2018 5:30 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
12
จ 02 ก.ค. 2018 5:30 pm โดย praphasri
สรุปการเรียนรู้วิธีการใช้งาน google drive
โดย praphasri อ 03 ก.ค. 2018 3:05 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
7
อ 03 ก.ค. 2018 3:05 pm โดย praphasri
R- mdsoft_siri_reciept_print (โมดูลปริ้น ใบเสร็จ)
โดย tatiya ส 19 ม.ค. 2019 8:49 pm บอร์ด สิริกิตติรัตน์ - Developer
2
5
อ 22 ม.ค. 2019 11:40 am โดย thatsawan
วิธีการทำ process bar ใน Google Sheets
โดย Chidchanok ส 19 ม.ค. 2019 8:16 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
17
ส 19 ม.ค. 2019 8:16 pm โดย Chidchanok
Q-ไม่สามารถเข้าใช้งาน Open ERP ค่ะ
โดย Chidchanok ส 19 ม.ค. 2019 7:10 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
3
18
จ 21 ม.ค. 2019 10:35 am โดย Chidchanok