บทที่ 9 CSS3 Animations ตอน 1
CSS3 Animations คือการสร้างภาพเคลื่อนไหว (Animations) โดยไม่ต้องใช้
Flash animations และ JavaScripts
โดยในการสร้างภาพเคลื่อนไหวนั้นต้องใช้คำสั่ง @keyframes (CSS3 Animations
ไม่สามารถใช้กับ Internet Explorer)
ตัวอย่าง
1.Animations แบบเคลื่อนที่ในทิศทางต่างๆ ตัวอย่างเช่น
<html>
<head>
<style>
div
{width:100px;
height:100px;
background:pink;
position:relative;
animation:mytest 5s infinite;
-moz-animation:mytest 5s infinite; /*Firefox*/
-webkit-animation:mytest 5s infinite; /*Safari and Chrome*/
-o-animation:mytest 5s infinite; /*Opera*/}
@keyframes mytest
{from {left:0px;}
to {left:400px;}}
@-moz-keyframes mytest /*Firefox*/
{from {left:0px;}
to {left:400px;}}
@-webkit-keyframes mytest /*Safari and Chrome*/
{from {left:0px;}
to {left:400px;}}
@-o-keyframes mytest /*Opera*/
{from {left:0px;}
to {left:400px;}}
</style>
<p> This example does not work in Internet Explorer.</p>
</head>
<body>
<div><center>Hello Nerd</center></div>
</body>
</html>ผลลัพธ์คือ
ดูตัวอย่างที่ 3 คลิกที่นี่
คำอธิบาย
{width:ความกว้างของสี่เหลี่ยม;
height:ความสูงของสี่เหลี่ยม;
background:สีของรูปสี่เหลี่ยม;
position:relative; (ใส่คำสั่งนี้เพื่อให้สี่เหลี่ยมมีการเคลื่อนที่)
animation:mytest เวลาที่รูปสี่เหลี่ยมใช้ในการเคลื่อนที่ (ในตัวอย่างใช้เป็น 5s ซึ่งหมายถึง 5 วินาที) infinite; (สำหรับในคำสั่งนี้ หากไม่ต้องการให้รูปสี่เหลี่ยมมีการเคลื่อนที่ซ๊ำไปซ๊ำมา ก็ให้ลบคำว่า infinite ออก
-moz-animation:mytest 5s infinite; /*Firefox*/
-webkit-animation:mytest 5s infinite; /*Safari and Chrome*/
-o-animation:mytest 5s infinite; /*Opera*/}
โดย -moz- เป็นของ Firefox -webkit- เป็นของ Safari and Chrome และ -o- เป็นของ Opera
@keyframes mytest
{from {left:ตำแหน่งเริ่มต้นเคลื่อนที่;}
to {left:ตำแหน่งสิ้นสุดการเคลื่อนที่;}}
ในตัวอย่างคือเคลื่อนที่ เริ่มจากตำแหน่ง 0px และ สิ้นสุดที่ตำแหน่ง 400pxคำสั่ง left คือเคลื่อนที่จากซ้ายไปขวา สามารถเปลี่ยนเป็น
bottom
(เคลื่อนที่จากล่างขึ้นบน) , top (เคลื่อนที่จากบนลงล่าง) และ right
(เคลื่อนที่จากขวาไปซ้าย) ได้ เพื่อเปลี่ยนทิศทางการเคลื่อนที่
2.Animations แบบเปลี่ยนสี ตัวอย่างเช่น
<html>
<head>
<style>
div
{width:100px;
height:100px;
background:pink;
animation:myfirst 5s infinite;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */}
@keyframes myfirst
{from {background:pink;}
to {background:blue;}}
@-moz-keyframes myfirst /* Firefox */
{from {background:pink;}
to {background:blue;}}
@-webkit-keyframes myfirst /* Safari and Chrome */
{from {background:pink;}
to {background:blue;}}
@-o-keyframes myfirst /* Opera */
{from {background:pink;}
to {background:blue;}}
</style>
</head>
<body>
<p> This example does not work in Internet Explorer.</p>
<div><center>Hello Nerd</center></div>
</body>
</html>ผลลัพธ์คือ
ดูตัวอย่างที่ 4 คลิกที่นี่
คำอธิบาย
{width:ความกว้างของรูปสี่เหลี่ยม;
height:ความสูงของรูปสี่เหลี่ยม;
background:สีของรูปสี่เหลี่ยม;
animation:myfirst เวลาที่ใช้ในการเปลี่ยนสี ในตัวอย่างใช้เป็น 5s ซึ่งหมายถึง 5 วินาที) infinite; (สำหรับในคำสั่งนี้ หากไม่ต้องการให้รูปสี่เหลี่ยมมีการสีซ๊ำไปซ๊ำมา ก็ให้ลบคำว่า infinite ออก
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s infinite; /* Opera */}
โดย -moz- เป็นของ Firefox -webkit- เป็นของ Safari and Chrome และ -o- เป็นของ Opera
@keyframes myfirst
{from {background:สีเริ่มต้น;}
to {background:สีสุดท้าย;}}
ในตัวอย่างคือเริ่มต้นจากสีชมพู แล้วค่อยๆเปลี่ยนเป็นสีน้ำเงิน
0 ความคิดเห็น:
แสดงความคิดเห็น