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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
มาทำความรู้จักกับ FYI (For your Information) FYI คืออะไร
โดย noppadonsk อ 03 ธ.ค. 2019 3:54 pm บอร์ด Share Knowledge
0
15
อ 03 ธ.ค. 2019 3:54 pm โดย noppadonsk
font ที่นิยมในการออกแบบให้ปัง
โดย noppadonsk อ 03 ธ.ค. 2019 3:38 pm บอร์ด Graphic design
0
15
อ 03 ธ.ค. 2019 3:38 pm โดย noppadonsk
จะ preg_match ยังไงให้ได้แค่ชื่อรูปครับ
โดย jamepiyawat อ 03 ธ.ค. 2019 3:03 pm บอร์ด Programming - PHP
2
47
อ 03 ธ.ค. 2019 3:20 pm โดย jamepiyawat
วิธีการการใช้ Node.js เพื่อสำหรับทำ Restful API
โดย Grammanano อ 03 ธ.ค. 2019 2:54 pm บอร์ด Jquery & Ajax Knowledge
0
57
อ 03 ธ.ค. 2019 2:54 pm โดย Grammanano
วิธีการใช้งาน Adobe permier pro เพื่อตัดต่อคลิปวีดิโอให้น่าสนใจ
โดย noppadonsk อ 03 ธ.ค. 2019 2:53 pm บอร์ด Graphic design
0
44
อ 03 ธ.ค. 2019 2:53 pm โดย noppadonsk
งานประจำวันที่ 3 ธันวาคม 2562
โดย numtan5839 อ 03 ธ.ค. 2019 10:09 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
16
อ 03 ธ.ค. 2019 7:43 pm โดย numtan5839
งานประจำวันที่ 3 ธันวาคม 2562
โดย noppadonsk อ 03 ธ.ค. 2019 10:03 am บอร์ด MT36 - นายนพดล สุชญากูล
6
54
พ 04 ธ.ค. 2019 6:03 pm โดย noppadonsk
งานประจำวันที่ 3 ธันวาคม 2562
โดย Grammanano อ 03 ธ.ค. 2019 10:05 am บอร์ด M098 - อนงค์นาท ไฝขาว
5
42
อ 03 ธ.ค. 2019 7:45 pm โดย Grammanano
Module "Login" ของ MooZiicart ใช้งานง่ายเพียงติดตั้ง
โดย prmindphp อ 03 ธ.ค. 2019 11:43 am บอร์ด MindPHP News & Feedback
0
304
อ 03 ธ.ค. 2019 11:43 am โดย prmindphp
การเขียน if/else ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 11:43 am บอร์ด Programming - C/C++ & java & Python
1
181
พ 11 ธ.ค. 2019 4:28 pm โดย Pragatisatpute
ออกแบบแบนเนอร์ให้เหมาะกับธุรกิจออนไลน์
โดย noppadonsk อ 03 ธ.ค. 2019 11:40 am บอร์ด Share Knowledge
0
13
อ 03 ธ.ค. 2019 11:40 am โดย noppadonsk
สร้างงานสวยด้วยASPECT RATIO
โดย noppadonsk อ 03 ธ.ค. 2019 11:03 am บอร์ด Share Knowledge
0
143
อ 03 ธ.ค. 2019 11:03 am โดย noppadonsk
วิธีแก้ไขรูปแบบวันที่ ในเอกสาร google sheet
โดย thatsawan อ 03 ธ.ค. 2019 10:47 am บอร์ด Microsoft Office Knowledge & line & Etc
1
26
อ 03 ธ.ค. 2019 1:35 pm โดย chatee supasand
สอบถาม ปุ่มส่งค่า Activityไปยังหน้าอื่นและกลับมาหน้าหลัก
โดย Dhanaporn Promchatsoonthorn จ 02 ธ.ค. 2019 10:01 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
29
จ 02 ธ.ค. 2019 10:01 pm โดย Dhanaporn Promchatsoonthorn
งานปฏิธิน 2020
โดย noppadonsk จ 02 ธ.ค. 2019 6:35 pm บอร์ด MT36 - นายนพดล สุชญากูล
7
68
ศ 13 ธ.ค. 2019 1:33 pm โดย noppadonsk
วิธีการเพิ่ม - ลบ ช่องกรอกข้อมูล โดยใช้ jquery เพื่อปรับเพิ่มลดช่องกรอกข้อมูลได้ตามต้องการ
โดย Ittichai_chupol จ 02 ธ.ค. 2019 5:03 pm บอร์ด Jquery & Ajax Knowledge
0
29
จ 02 ธ.ค. 2019 5:03 pm โดย Ittichai_chupol
ขอความอนุเคราะห์เรื่อง การเขียนคิวรี่ข้อมูลในเดือน
โดย 9kitti จ 02 ธ.ค. 2019 1:39 pm บอร์ด SQL - Database
1
34
จ 02 ธ.ค. 2019 2:22 pm โดย mindphp
วิธีเดินทางจากสุราษฎร์ธานี (เกาะสมุย) มา กทม.
โดย Grammanano จ 02 ธ.ค. 2019 12:21 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
35
จ 02 ธ.ค. 2019 3:49 pm โดย thatsawan
การเดินทางจาก พัทยา มา กทม.(หมอชิต2)
โดย noppadonsk จ 02 ธ.ค. 2019 12:06 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
48
จ 02 ธ.ค. 2019 12:06 pm โดย noppadonsk
list ความรู้ที่มี ว่าเคยเรียน หรือเคยทำอะไรมาบ้าง
โดย noppadonsk จ 02 ธ.ค. 2019 11:19 am บอร์ด MT36 - นายนพดล สุชญากูล
1
17
จ 02 ธ.ค. 2019 3:55 pm โดย thatsawan