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 attribute สามารถรับค่าต่อไปนี้

  • 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 attribute สามารถรับค่าต่อไปนี้

  • 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 attribute สามารถเกาะต่อพฤติกรรมนี้

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

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