กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

ภาพเคลื่อนไหว 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 คุณต้องระบุคีย์เฟรมสำหรับภาพเคลื่อนไหวก่อน

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


กฎ @คีย์เฟรม

เมื่อคุณระบุสไตล์ 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;
}

หมายเหตุ:คุณสมบัติ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;
}

ตัวอย่างต่อไปนี้จะเปลี่ยนทั้งสีพื้นหลังและตำแหน่งขององค์ประกอบ <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;
}


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

คุณสมบัติระบุ การanimation-delayหน่วงเวลาสำหรับการเริ่มแอนิเมชัน

ตัวอย่างต่อไปนี้มีความล่าช้า 2 วินาทีก่อนเริ่มแอนิเมชัน:

ตัวอย่าง

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

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

ในตัวอย่างต่อไปนี้ แอนิเมชั่นจะเริ่มราวกับว่ามันได้เล่นไปแล้ว 2 วินาที:

ตัวอย่าง

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

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

คุณสมบัติanimation-iteration-countระบุจำนวนครั้งที่แอนิเมชั่นควรเรียกใช้

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

ตัวอย่าง

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

ตัวอย่างต่อไปนี้ใช้ค่า "อนันต์" เพื่อให้แอนิเมชั่นดำเนินต่อไปตลอดกาล:

ตัวอย่าง

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

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

คุณสมบัติ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;
}

ตัวอย่างต่อไปนี้ใช้ค่า "ทางเลือก" เพื่อให้แอนิเมชั่นวิ่งไปข้างหน้าก่อน แล้วจึงย้อนกลับ:

ตัวอย่าง

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

ตัวอย่างต่อไปนี้ใช้ค่า "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;
}

ระบุเส้นโค้งความเร็วของแอนิเมชัน

คุณสมบัติ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;}

ระบุโหมดเติมสำหรับแอนิเมชั่น

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

คุณสมบัติ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;
}

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

ตัวอย่าง

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

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

ตัวอย่าง

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

แอนิเมชั่นชวเลขพร็อพเพอร์ตี้

ตัวอย่างด้านล่างใช้คุณสมบัติแอนิเมชั่นหกคุณสมบัติ:

ตัวอย่าง

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

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

ตัวอย่าง

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

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

เพิ่มภาพเคลื่อนไหว 2 วินาทีสำหรับองค์ประกอบ <div> ซึ่งจะเปลี่ยนสีจากสีแดงเป็นสีน้ำเงิน เรียกภาพเคลื่อนไหวว่า "ตัวอย่าง"

<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: ;
  : 2s;
}

@keyframes example {
  from {: red;}
  to {: blue;}
}
</style>

<body>
  <div>This is a div</div>
</body>


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

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

Property Description
@keyframes Specifies the animation code
animation A shorthand property for setting all the animation properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long time an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of the animation