บทที่ 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
