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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการใช้ JQuery ทำค้นหาเฉพาะข้อมูลที่มีค่าตรงตามที่ตรงการ
โดย Ittichai_chupol อ 03 ธ.ค. 2019 6:19 pm บอร์ด Jquery & Ajax Knowledge
0
6
อ 03 ธ.ค. 2019 6:19 pm โดย Ittichai_chupol
การเขียน do while loop ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 5:24 pm บอร์ด Share Knowledge
0
10
อ 03 ธ.ค. 2019 5:24 pm โดย Grammanano
บทความ Draft ภาพนับว่าละเมิดลิขสิทธิ์หรือไม่
โดย noppadonsk อ 03 ธ.ค. 2019 4:47 pm บอร์ด Share Knowledge
0
7
อ 03 ธ.ค. 2019 4:47 pm โดย noppadonsk
Module "Weather Forcecast" การพยากรณ์อากาศสำหรับประเทศไทยล่วงหน้า
โดย prmindphp อ 03 ธ.ค. 2019 4:43 pm บอร์ด MindPHP News & Feedback
0
15
อ 03 ธ.ค. 2019 4:43 pm โดย prmindphp
การเขียน while loop ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 4:29 pm บอร์ด Share Knowledge
0
12
อ 03 ธ.ค. 2019 4:29 pm โดย Grammanano
ออนไลน์มาร์เก็ตติ้ง กับ ดิจิตอลมาเก็ตติ้ง แตกต่างกันอย่างไร
โดย noppadonsk อ 03 ธ.ค. 2019 4:16 pm บอร์ด Share Knowledge
0
11
อ 03 ธ.ค. 2019 4:16 pm โดย noppadonsk
มาทำความรู้จักกับ FYI (For your Information) FYI คืออะไร
โดย noppadonsk อ 03 ธ.ค. 2019 3:54 pm บอร์ด Share Knowledge
0
11
อ 03 ธ.ค. 2019 3:54 pm โดย noppadonsk
font ที่นิยมในการออกแบบให้ปัง
โดย noppadonsk อ 03 ธ.ค. 2019 3:38 pm บอร์ด Graphic design
0
11
อ 03 ธ.ค. 2019 3:38 pm โดย noppadonsk
จะ preg_match ยังไงให้ได้แค่ชื่อรูปครับ
โดย jamepiyawat อ 03 ธ.ค. 2019 3:03 pm บอร์ด Programming - PHP
2
41
อ 03 ธ.ค. 2019 3:20 pm โดย jamepiyawat
วิธีการการใช้ Node.js เพื่อสำหรับทำ Restful API
โดย Grammanano อ 03 ธ.ค. 2019 2:54 pm บอร์ด Jquery & Ajax Knowledge
0
53
อ 03 ธ.ค. 2019 2:54 pm โดย Grammanano
วิธีการใช้งาน Adobe permier pro เพื่อตัดต่อคลิปวีดิโอให้น่าสนใจ
โดย noppadonsk อ 03 ธ.ค. 2019 2:53 pm บอร์ด Graphic design
0
40
อ 03 ธ.ค. 2019 2:53 pm โดย noppadonsk
งานประจำวันที่ 3 ธันวาคม 2562
โดย numtan5839 อ 03 ธ.ค. 2019 10:09 am บอร์ด M097 - ตรีเนตร บูรณโพธิ์ทอง
2
15
อ 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
295
อ 03 ธ.ค. 2019 11:43 am โดย prmindphp
การเขียน if/else ในภาษา C
โดย Grammanano อ 03 ธ.ค. 2019 11:43 am บอร์ด Programming - C/C++ & java & Python
0
156
อ 03 ธ.ค. 2019 11:43 am โดย Grammanano
ออกแบบแบนเนอร์ให้เหมาะกับธุรกิจออนไลน์
โดย noppadonsk อ 03 ธ.ค. 2019 11:40 am บอร์ด Share Knowledge
0
11
อ 03 ธ.ค. 2019 11:40 am โดย noppadonsk
สร้างงานสวยด้วยASPECT RATIO
โดย noppadonsk อ 03 ธ.ค. 2019 11:03 am บอร์ด Share Knowledge
0
142
อ 03 ธ.ค. 2019 11:03 am โดย noppadonsk
วิธีแก้ไขรูปแบบวันที่ ในเอกสาร google sheet
โดย thatsawan อ 03 ธ.ค. 2019 10:47 am บอร์ด Microsoft Office Knowledge & line & Etc
1
20
อ 03 ธ.ค. 2019 1:35 pm โดย chatee supasand
สอบถาม ปุ่มส่งค่า Activityไปยังหน้าอื่นและกลับมาหน้าหลัก
โดย Dhanaporn Promchatsoonthorn จ 02 ธ.ค. 2019 10:01 pm บอร์ด Mobile Programming - Android, iOS, Window Phone
0
24
จ 02 ธ.ค. 2019 10:01 pm โดย Dhanaporn Promchatsoonthorn