ภาพเคลื่อนไหว CSS

สารบัญ

แสดงสารบัญ

ภาพเคลื่อนไหว CSS

CSS ช่วยให้ภาพเคลื่อนไหวขององค์ประกอบ HTML โดยไม่ต้องใช้ JavaScript หรือ Flash!

CSS

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติต่อไปนี้:

@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

รองรับเบราว์เซอร์สำหรับภาพเคลื่อนไหว

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับคุณสมบัตินี้โดยสมบูรณ์

Property
@keyframes	43.0	10.0	16.0	9.0	30.0
animation-name	43.0	10.0	16.0	9.0	30.0
animation-duration	43.0	10.0	16.0	9.0	30.0
animation-delay	43.0	10.0	16.0	9.0	30.0
animation-iteration-count	43.0	10.0	16.0	9.0	30.0
animation-direction	43.0	10.0	16.0	9.0	30.0
animation-timing-function	43.0	10.0	16.0	9.0	30.0
animation-fill-mode	43.0	10.0	16.0	9.0	30.0
animation	43.0	10.0	16.0	9.0	30.0

ภาพเคลื่อนไหว CSS คืออะไร?

ภาพเคลื่อนไหวช่วยให้องค์ประกอบค่อยๆ เปลี่ยนจากสไตล์หนึ่งไปอีกสไตล์หนึ่ง

คุณสามารถเปลี่ยนคุณสมบัติ CSS ได้มากเท่าที่คุณต้องการ บ่อยเท่าที่คุณต้องการ

หากต้องการใช้ภาพเคลื่อนไหว CSS คุณต้องระบุคีย์เฟรมบางส่วนสำหรับ แอนิเมชั่น

คีย์เฟรมจะเก็บสไตล์ที่องค์ประกอบจะมีในช่วงเวลาหนึ่งๆ

กฎ @keyframes

เมื่อคุณระบุสไตล์ CSS ภายใน @keyframes ตามกฎแล้ว ภาพเคลื่อนไหวจะค่อยๆ เปลี่ยนจากสไตล์ปัจจุบันไปเป็นสไตล์ใหม่ ในบางช่วงเวลา

เพื่อให้แอนิเมชั่นทำงานได้ คุณต้องผูกแอนิเมชั่นกับองค์ประกอบ

ตัวอย่างต่อไปนี้ผูกภาพเคลื่อนไหว "ตัวอย่าง" กับองค์ประกอบ <div> แอนิเมชั่นจะคงอยู่เป็นเวลา 4 วินาที และจะค่อยๆ เปลี่ยน สีพื้นหลังของ <div> องค์ประกอบจาก "สีแดง" ถึง "สีเหลือง":

ตัวอย่าง

/* The animation code */
@keyframes example {
  from {background-color: red;}
   
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  
background-color: red;	animation-name: example;
  animation-duration: 4s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

หมายเหตุ: คุณสมบัติ animation-duration กำหนดระยะเวลาที่แอนิเมชั่นควรใช้เวลานานจึงจะเสร็จสมบูรณ์ หากไม่ได้ระบุคุณสมบัติ animation-duration จะไม่มีแอนิเมชั่นเกิดขึ้นเพราะว่า ค่าเริ่มต้นคือ 0 วินาที (0 วินาที)

ในตัวอย่างข้างต้น เราได้ระบุว่าเมื่อใดรูปแบบจะเปลี่ยนโดยใช้ คำหลัก "จาก" และ "ถึง" (ซึ่งหมายถึง 0% (เริ่มต้น) และ 100% (สมบูรณ์))

นอกจากนี้ยังสามารถใช้เปอร์เซ็นต์ได้ คุณสามารถเพิ่มได้มากเท่าที่ต้องการโดยใช้เปอร์เซ็นต์ เปลี่ยนสไตล์ตามที่คุณต้องการ

ตัวอย่างต่อไปนี้จะเปลี่ยนสีพื้นหลังของ <div> องค์ประกอบเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 25% เสร็จสมบูรณ์ 50% และอีกครั้งเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 100%:

ตัวอย่าง

/* The animation code */
@keyframes example
{
  0%   {background-color: red;}
   
25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

ตัวอย่างต่อไปนี้จะเปลี่ยนทั้งสีพื้นหลังและตำแหน่งของ <div> องค์ประกอบเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 25% เสร็จสมบูรณ์ 50% และอีกครั้งเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์ 100%:

ตัวอย่าง

/* The animation code */
@keyframes example
{
  0%   {background-color:red; left:0px; top:0px;}
   
25%  {background-color:yellow; left:200px; top:0px;}
   
50%  {background-color:blue; left:200px; top:200px;}
   
75%  {background-color:green; left:0px; top:200px;}
   
100% {background-color:red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<div></div>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>
</html>

หน่วงเวลาภาพเคลื่อนไหว

animation-delay คุณสมบัติระบุความล่าช้าในการเริ่มต้นของภาพเคลื่อนไหว

ตัวอย่างต่อไปนี้มีความล่าช้า 2 วินาทีก่อนที่จะเริ่มภาพเคลื่อนไหว:

ตัวอย่าง

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
    
animation-duration: 4s;
  animation-delay: 2s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-delay property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation:</p>

<div></div>

</body>
</html>

อนุญาตให้ใช้ค่าลบได้เช่นกัน หากใช้ค่าลบภาพเคลื่อนไหว จะเริ่มเหมือนกับว่าได้เล่นไปแล้ว N วินาที

ในตัวอย่างต่อไปนี้ ภาพเคลื่อนไหวจะเริ่มต้นเหมือนกับว่าได้เกิดขึ้นแล้ว เล่นเป็นเวลา 2 วินาที:

ตัวอย่าง

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-delay: -2s;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Using negative values in the animation-delay property: Here, the animation will start as if it had already been playing for 2 seconds:</p>

<div></div>

</body>
</html>

กำหนดจำนวนครั้งที่แอนิเมชั่นควรทำงาน

คุณสมบัติ animation-iteration-count ระบุจำนวนครั้งที่ควรเรียกใช้ภาพเคลื่อนไหว

ตัวอย่างต่อไปนี้จะเรียกใช้ภาพเคลื่อนไหว 3 ครั้งก่อนที่จะหยุด:

ตัวอย่าง

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops:</p>

<div></div>

</body>
</html>

ตัวอย่างต่อไปนี้ใช้ค่า "infinite" เพื่อสร้างภาพเคลื่อนไหว ดำเนินต่อไปตลอดกาล:

ตัวอย่าง

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
    animation-iteration-count: 
infinite;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>

เรียกใช้แอนิเมชั่นในทิศทางตรงกันข้ามหรือสลับวงจร

animation-direction คุณสมบัติระบุ ว่าควรเล่นภาพเคลื่อนไหวไปข้างหน้า ข้างหลัง หรือสลับกัน รอบ

คุณสมบัติทิศทางภาพเคลื่อนไหวสามารถมีค่าต่อไปนี้:

normal: - ภาพเคลื่อนไหวจะเล่นได้ตามปกติ (ไปข้างหน้า) นี่เป็นค่าเริ่มต้น
reverse: - ภาพเคลื่อนไหวจะเล่นในทิศทางย้อนกลับ (ย้อนกลับ)
alternate: - ภาพเคลื่อนไหวจะเล่นไปข้างหน้าก่อนแล้วจึงย้อนกลับ
alternate-reverse: - แอนิเมชั่นจะเล่นแบบย้อนกลับก่อน จากนั้นจึงเล่นไปข้างหน้า

ตัวอย่างต่อไปนี้จะเรียกใช้ภาพเคลื่อนไหวในทิศทางย้อนกลับ (ย้อนกลับ):

ตัวอย่าง

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  
animation-name: example;
  
animation-duration: 4s;
  animation-direction: 
reverse;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example will run the animation in reverse direction (backwards):</p>

<div></div>

</body>
</html>

ตัวอย่างต่อไปนี้ใช้ค่า "alternate" เพื่อสร้างภาพเคลื่อนไหว วิ่งไปข้างหน้าก่อนแล้วถอยหลัง:

ตัวอย่าง

div {
  
width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate" to make the animation run forwards first, then backwards:</p>

<div></div>

</body>
</html>

ตัวอย่างต่อไปนี้ใช้ค่า "alternate-reverse" เพื่อสร้างภาพเคลื่อนไหว วิ่งถอยหลังก่อนแล้วจึงเดินหน้า:

ตัวอย่าง

div {
  width: 100px;
  height: 100px;
  
position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: 
alternate-reverse;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;  
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles. The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards:</p>

<div></div>

</body>
</html>

ระบุเส้นโค้งความเร็วของภาพเคลื่อนไหว

animation-timing-function คุณสมบัติระบุเส้นโค้งความเร็วของ แอนิเมชั่น

คุณสมบัติ Animation-timing-function สามารถมีค่าต่อไปนี้:

ease: - ระบุภาพเคลื่อนไหวโดยเริ่มช้า จากนั้นเร็ว จากนั้นสิ้นสุดอย่างช้าๆ (นี่คือค่าเริ่มต้น)
linear: - ระบุภาพเคลื่อนไหวด้วยความเร็วเท่ากันตั้งแต่ต้นจนจบ
ease-in: - ระบุภาพเคลื่อนไหวที่เริ่มต้นช้า
ease-out: - ระบุภาพเคลื่อนไหวที่มีจุดสิ้นสุดช้า
ease-in-out: - ระบุภาพเคลื่อนไหวที่มีการเริ่มต้นและสิ้นสุดที่ช้า
cubic-bezier(n,n,n,n): - ให้คุณกำหนดค่าของคุณเองในฟังก์ชันลูกบาศก์เบซิเยร์

ตัวอย่างต่อไปนี้แสดงเส้นโค้งความเร็วต่างๆ ที่สามารถใช้ได้:

ตัวอย่าง

#div1 {animation-timing-function: linear;}
#div2 
{animation-timing-function: ease;}
#div3 {animation-timing-function: 
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 
{animation-timing-function: ease-in-out;}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 50px;
  background-color: red;
  font-weight: bold;
  position: relative;
  animation: mymove 5s;
  animation-fill-mode: forwards;
}

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

@keyframes mymove {
  from {left: 0px;}
  to {left: 300px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-timing-function property specifies the speed curve of the animation. The following example shows some of the different speed curves that can be used:</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

ระบุโหมดการเติมสำหรับภาพเคลื่อนไหว

ภาพเคลื่อนไหว CSS จะไม่ส่งผลต่อองค์ประกอบก่อนที่จะเล่นคีย์เฟรมแรก หรือหลังจากเล่นคีย์เฟรมสุดท้ายแล้ว คุณสมบัติโหมดเติมภาพเคลื่อนไหวสามารถทำได้ แทนที่พฤติกรรมนี้

animation-fill-mode คุณสมบัติระบุ สไตล์สำหรับองค์ประกอบเป้าหมายเมื่อภาพเคลื่อนไหวไม่ได้เล่น (ก่อนหน้านั้น เริ่มต้น หลังจากสิ้นสุด หรือทั้งสองอย่าง)

คุณสมบัติ Animation-fill-mode สามารถมีค่าต่อไปนี้:

none: - ค่าเริ่มต้น ภาพเคลื่อนไหวจะไม่นำสไตล์ใดๆ ไปใช้กับองค์ประกอบก่อนหรือหลังการดำเนินการ
forwards: - องค์ประกอบจะคงค่าสไตล์ที่กำหนดโดยคีย์เฟรมสุดท้าย (ขึ้นอยู่กับทิศทางของภาพเคลื่อนไหวและจำนวนการวนซ้ำของภาพเคลื่อนไหว)
backwards: - องค์ประกอบจะได้รับค่าสไตล์ที่กำหนดโดยคีย์เฟรมแรก (ขึ้นอยู่กับทิศทางของภาพเคลื่อนไหว) และคงค่านี้ไว้ในช่วงระยะเวลาหน่วงของภาพเคลื่อนไหว
both: - ภาพเคลื่อนไหวจะเป็นไปตามกฎทั้งไปข้างหน้าและข้างหลัง โดยขยายคุณสมบัติของภาพเคลื่อนไหวทั้งสองทิศทาง

ตัวอย่างต่อไปนี้ให้ <div> องค์ประกอบเก็บค่าสไตล์จาก คีย์เฟรมสุดท้ายเมื่อภาพเคลื่อนไหวจบลง:

ตัวอย่าง

 div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
    animation-fill-mode: forwards;
  }

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-fill-mode: forwards;
}

@keyframes example {
  from {top: 0px;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element retain the style values set by the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

ตัวอย่างต่อไปนี้ให้ <div> องค์ประกอบได้รับค่าสไตล์ที่กำหนดโดย คีย์เฟรมแรกก่อนที่ภาพเคลื่อนไหวจะเริ่มต้น (ในช่วงระยะเวลาหน่วงภาพเคลื่อนไหว):

ตัวอย่าง

 div {
  width: 100px;
  height: 100px;
  
  background: red;
  position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: backwards;
  }

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts (during the animation-delay period):</p>

<div></div>

</body>
</html>

ตัวอย่างต่อไปนี้ให้ <div> องค์ประกอบได้รับการตั้งค่าสไตล์ โดยคีย์เฟรมแรกก่อนที่ภาพเคลื่อนไหวจะเริ่มต้น และคงค่าสไตล์ไว้ จากคีย์เฟรมสุดท้ายเมื่อภาพเคลื่อนไหวจบลง:

ตัวอย่าง

 div {
  width: 100px;
  height: 100px;
  background: red;
    position: relative;
  
animation-name: example;
  
animation-duration: 3s;
  
animation-delay: 2s;
  animation-fill-mode: both;
  }

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;  
  animation-delay: 2s;
  animation-fill-mode: both;
}

@keyframes example {
  from {top: 0px; background-color: yellow;}
  to {top: 200px; background-color: blue;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>Let the div element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends:</p>

<div></div>

</body>
</html>

แอนิเมชั่นคุณสมบัติชวเลข

ตัวอย่างด้านล่างนี้ใช้คุณสมบัติภาพเคลื่อนไหวหกประการ:

ตัวอย่าง

div
{	animation-name: example;
   
animation-duration: 5s;
   
animation-timing-function: linear;
   
animation-delay: 2s;
   
animation-iteration-count: infinite;
   
animation-direction: alternate;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses six of the animation properties:</p>

<div></div>

</body>
</html>

เอฟเฟ็กต์ภาพเคลื่อนไหวแบบเดียวกับข้างต้นสามารถทำได้โดยใช้ชวเลข ภาพเคลื่อนไหว คุณสมบัติ:

ตัวอย่าง

div
{
    animation: example 5s linear 2s infinite alternate;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>This example uses the shorthand animation property:</p>

<div></div>

</body>
</html>

คุณสมบัติภาพเคลื่อนไหว CSS

ตารางต่อไปนี้แสดงรายการกฎ @keyframes และคุณสมบัติภาพเคลื่อนไหว CSS ทั้งหมด:

@keyframes: ระบุรหัสภาพเคลื่อนไหว
animation: คุณสมบัติชวเลขสำหรับการตั้งค่าคุณสมบัติภาพเคลื่อนไหวทั้งหมด
animation-delay: ระบุความล่าช้าในการเริ่มต้นของภาพเคลื่อนไหว
animation-direction: ระบุว่าควรเล่นภาพเคลื่อนไหวไปข้างหน้า ถอยหลัง หรือ ในรอบสลับกัน
animation-duration: ระบุระยะเวลาที่แอนิเมชั่นควรใช้เวลานานจึงจะเสร็จสิ้นหนึ่งรอบ
animation-fill-mode: ระบุสไตล์สำหรับองค์ประกอบเมื่อภาพเคลื่อนไหวไม่ได้เล่น (ก่อนเริ่ม หลังจบ หรือทั้งสองอย่าง)
animation-iteration-count: ระบุจำนวนครั้งที่ควรเล่นภาพเคลื่อนไหว
animation-name: ระบุชื่อของภาพเคลื่อนไหว @keyframes
animation-play-state: ระบุว่าภาพเคลื่อนไหวกำลังทำงานหรือหยุดชั่วคราว
animation-timing-function: ระบุเส้นโค้งความเร็วของภาพเคลื่อนไหว