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

การสนับสนุนเบราซเรอร์ของอนิเมชั่น

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

属性 Chrome IE Firefox Safari Opera
@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 รูปแบบ

ถ้าคุณมี @keyframes รูปแบบนี้กำหนดสไตล์ CSS ที่จะเปลี่ยนแปลงเรียบเรียงตามเวลาที่กำหนด。

เพื่อที่อนิเมชั่นจะมีผล คุณจำเป็นต้องเชื่อมโยงอนิเมชั่นกับองค์ประกอบเฉพาะอย่างหนึ่ง。

ตัวอย่างดังนี้จะเชื่อมโยง "example" อนิเมชั่นกับ <div> โมดูล อนิเมชั่นจะใช้เวลา 4 วินาที และเปลี่ยนสีของ <div> โมดูลจาก "red" ไปเป็น "yellow" แบบเรียบเรียง:

实例

/* รหัสอนุรักษ์เคลื่อนไหว */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* ใช้กระบวนการอนิเมชั่นในองค์ประกอบนี้ */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

ข้อเตือน:animation-duration ขอบเขตนี้กำหนดเวลาที่จะใช้ในการสิ้นสุดอนิเมชั่น。ถ้าไม่ระบุ animation-duration ถ้าไม่มีขอบเขตนี้ อนิเมชั่นจะไม่เกิดขึ้น เพราะค่าเริ่มต้นคือ 0s (0 วินาที)。

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

คุณยังสามารถใช้ขอบเขตเปอร์เซ็นต์ได้เช่นกัน。ด้วยการใช้เปอร์เซ็นต์ คุณสามารถเพิ่มการเปลี่ยนแปลงสไตล์ที่คุณต้องการได้มากกว่าหนึ่งรายการ。

ตัวอย่างดังนี้จะเปลี่ยนสี배경ของ <div> โมดูลเมื่ออนิเมชั่นเสร็จ 25%，เสร็จ 50% และอนิเมชั่นเสร็จ 100%:

实例

/* รหัสอนุรักษ์เคลื่อนไหว */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* องค์ประกอบที่ใช้อนุรักษ์เคลื่อนไหว */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

亲自试一试

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

实例

/* รหัสอนุรักษ์เคลื่อนไหว */
@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;}
}
/* องค์ประกอบที่ใช้อนุรักษ์เคลื่อนไหว */
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;
}

亲自试一试

ตัวอย่างด้านล่างใช้ค่า "infinite" ที่ทำให้อนุรักษ์เคลื่อนไหวเล่นตลอด:

实例

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

亲自试一试

เล่นอนุรักษ์เคลื่อนไหวทิศทางตรงกันหรือเล่นกลับกัน

animation-direction 属性กำหนดว่าอนุรักษ์เคลื่อนไหวจะเล่นไปทางหน้าหน้า หลังหลังกัน หรือเล่นกลับกัน:

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;
}

亲自试一试

ตัวอย่างด้านล่างใช้ค่า "alternate" ที่ทำให้อนุรักษ์เคลื่อนไหวเข้าหน้าหน้า แล้วหลังหลังกัน:

实例

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 มีความสามารถในการเลื่อนทางการปฏิบัติตามพฤติกรรมนี้

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

animation-fill-mode สามารถรับค่าที่ต่อไปนี้ได้:

  • none - ค่าเริ่มต้นโดยมาตราฐาน。การ์ตูนจะไม่ประกาศคุณสมบัติใดๆต่อองค์ประกอบก่อนหน้าหรือหลังจากการประกาศ
  • forwards - องค์ประกอบจะรักษาคุณสมบัติที่กำหนดโดยอนุกรมต้นแบบสุดท้าย (ขึ้นอยู่กับ animation-direction และ animation-iteration-count)
  • backwards - องค์ประกอบจะได้รับคุณสมบัติที่กำหนดโดยอนุกรมต้นแบบแรก (ขึ้นอยู่กับ animation-direction) และรักษาค่านี้ระหว่างช่วงเวลาที่การ์ตูนหยุดลง
  • 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;
}

亲自试一试

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 กำหนดความเร็วของแอนิเมชัน