วิธีสร้างภาพเคลื่อนไหวด้วย CSS

เผยแพร่แล้ว: 2014-12-27

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

แม้ว่าจะทำได้ตามปกติด้วย GIF, SVG, WebGL และวิดีโอพื้นหลัง แต่ภาพเคลื่อนไหวก็สามารถสร้างได้อย่างมีประสิทธิภาพด้วย CSS การรองรับเบราว์เซอร์สำหรับแอนิเมชั่น CSS ได้รับการปรับปรุงอย่างมากและกำลังได้รับความนิยมอย่างมาก — เบราว์เซอร์ที่เข้ากันได้ ได้แก่ Firefox 5+, IE 10+, Chrome, Safari 4+ และ Opera 12+

วันนี้ฉันจะแนะนำคุณเกี่ยวกับพื้นฐานการสร้างแอนิเมชั่น CSS ด้วยการสาธิตทีละขั้นตอน อยู่ต่อไปหลังจากนั้นและดูตัวอย่างภาพเคลื่อนไหวห้าตัวอย่าง คุณจะสามารถใช้แนวคิดทั้งหมดเหล่านี้เพื่อสร้างแอนิเมชั่นสำหรับโครงการของคุณเองได้!

ข้อมูลพื้นฐานเกี่ยวกับแอนิเมชั่น CSS

เห็นได้ชัดว่า สิ่งสำคัญคือต้องครอบคลุมพื้นฐานของการทำงานของแอนิเมชั่น ก่อนที่เราจะดำดิ่งลงไปในแอนิเมชั่น CSS แสนสนุกทั้งห้าแบบ
ตัวอย่างเช่น คีย์เฟรมเป็นองค์ประกอบหลักในภาพเคลื่อนไหว CSS คุณอาจคุ้นเคยกับคำนั้น หากคุณเคยทำงานกับ Adobe Flash หรือมีประสบการณ์เกี่ยวกับการตัดต่อวิดีโอ ในกรณีนั้น คำว่า คีย์เฟรม เป็นเพียงสิ่งที่คุณคิด: เป็นวิธีการระบุการดำเนินการบางอย่าง

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

@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

พื้นฐานของคีย์เฟรมเฟดเอาท์ที่เราเพิ่งสร้างขึ้น ได้แก่:

  • ชื่อที่สื่อความหมาย: ในกรณีนี้คือ fadeOut
  • ขั้นตอนของแอนิเมชั่น: จาก ถูกตั้งค่าเป็น 0% และ ถึง ถูกตั้งค่าเป็น 100%
  • สไตล์ CSS ที่จะนำไปใช้ในแต่ละขั้นตอน

โดยค่าเริ่มต้น From จะอยู่ที่ 0% และ To จะอยู่ที่ 100% เนื่องจากไม่มีการระบุขั้นตอนอื่นๆ ในตัวอย่างนี้

การดำเนินการเฉพาะที่มีคุณสมบัติย่อยของแอนิเมชัน

เราจำเป็นต้องดำเนินการอีกเล็กน้อยเพื่อจัดรูปแบบสิ่งต่างๆ — เราจำเป็นต้องจัดรูปแบบคุณสมบัติ animation ด้วยคุณสมบัติย่อย หากคีย์เฟรมกำหนดลักษณะของแอนิเมชั่น คุณสมบัติย่อยของแอนิเมชันจะกำหนดกฎเฉพาะสำหรับแอนิเมชั่น สิ่งเหล่านี้ช่วยให้คุณกำหนดค่าเวลา ระยะเวลา และรายละเอียดสำคัญอื่นๆ ว่าลำดับภาพเคลื่อนไหวควรดำเนินไปอย่างไร

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

ร่วมงานกับศิลปินโมชั่นกราฟิก

ไม่มีอะไรจะทำให้งานออกแบบของคุณมีชีวิตชีวาได้เหมือนแอนิเมชั่น แต่ถ้าคุณไม่เคยทำงานกับแอนิเมเตอร์หรือศิลปินโมชั่นกราฟิก การเคลื่อนไหวอาจรู้สึกเหมือนอยู่ต่างโลก หากคุณกำลังคิดเกี่ยวกับพ...

  • Animation-name: ชื่อของ @keyframes at-rule ซึ่งอธิบายคีย์เฟรมของแอนิเมชั่น ชื่อ fadeOut ในตัวอย่างก่อนหน้านี้เป็นตัวอย่างของชื่อแอนิเมชั่น
  • แอนิเมชั่น-ระยะเวลา: ระยะเวลาที่แอนิเมชั่นควรใช้เพื่อให้ครบหนึ่งรอบ
  • Animation-timing-function: เวลาของแอนิเมชั่น โดยเฉพาะวิธีที่แอนิเมชั่นเปลี่ยนผ่านคีย์เฟรม ฟังก์ชันนี้มีความสามารถในการสร้างเส้นโค้งการเร่งความเร็ว ตัวอย่าง ได้แก่ เส้นตรง ความง่าย ความง่ายเข้า การง่ายออก การง่ายเข้า-ออก หรือ ลูกบาศก์เบซิเย ร์
  • Animation-delay: หน่วงเวลาระหว่างเวลาที่องค์ประกอบถูกโหลดและจุดเริ่มต้นของภาพเคลื่อนไหว
  • Animation-iteration-count: จำนวนครั้งที่แอนิเมชั่นควรทำซ้ำ ต้องการให้แอนิเมชั่นดำเนินต่อไปตลอดไปหรือไม่? คุณสามารถระบุ อนันต์ เพื่อเล่นแอนิเมชั่นซ้ำไปเรื่อย ๆ
  • ทิศทางของภาพเคลื่อนไหว: ภาพเคลื่อนไหวควรสลับทิศทางในการวิ่งแต่ละครั้งตามลำดับหรือไม่ หรือรีเซ็ตเป็นจุดเริ่มต้นและทำซ้ำเอง
  • โหมดเติมแอนิเมชั่น: ค่าที่ใช้โดยแอนิเมชั่นทั้งก่อนและหลังได้ดำเนินการแล้ว
  • สถานะการเล่นแอนิเมชั่น: ด้วยตัวเลือกนี้ คุณสามารถหยุดชั่วคราวและเล่นต่อสำหรับลำดับแอนิเมชั่นได้ ตัวอย่างคือ none ไปข้างหน้า ข้างหลัง หรือ ทั้งสอง อย่าง

นำทุกอย่างมารวมกันเพื่อรองรับเบราว์เซอร์ที่ดีที่สุด

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

คุณอาจคุ้นเคยกับคำนำหน้าของผู้จำหน่ายหรือเบราว์เซอร์ ซึ่งจำเป็นเมื่อทำงานกับแอนิเมชัน เราจำเป็นต้องตรวจสอบให้แน่ใจว่าเรามีการสนับสนุนเบราว์เซอร์ที่ดีที่สุด นี่คือคำนำหน้าเบราว์เซอร์มาตรฐาน:

  • Chrome & Safari: -webkit-
  • ไฟร์ฟอกซ์: -moz-
  • Internet Explorer: -ms-

Internet Explorer 10 ไม่ต้องการคำนำหน้าสำหรับการเปลี่ยน แต่การแปลงทั้งหมดต้องใช้คำนำหน้า Opera ได้รับการคุ้มครองเนื่องจากรู้จักรูปแบบ WebKit

จุดเริ่มต้นการเปลี่ยนแปลง

  • -webkit-transition
  • -moz-transition
  • transition

เริ่มการแปลง:

  • -webkit-transform
  • -moz-transform
  • -ms-transform
  • transform

ต้องการลองใช้แอนิเมชั่นประเภทอื่นหรือไม่? ทำ gif ใน Photoshop! นี่คือวิธีการ

ห้าแอนิเมชั่นในการดำเนินการ

เมื่อเราครอบคลุมพื้นฐานแล้ว มาสร้างโค้ดเพื่อนำไปใช้กัน!

แอนิเมชั่นที่หนึ่ง: วงกลมถึงสี่เหลี่ยม
แอนิเมชั่น-หนึ่ง

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

การสร้าง div เพื่อเริ่มต้นเป็นวิธีที่ดีในการทดสอบแอนิเมชั่น: 

<div class=”animationOne”>
</div>

ตอนนี้มาตั้งค่า @keyframes ของเรากัน แอนิเมชั่นนี้จะมี 5 สเตจ เนื่องจากสี่เหลี่ยมจัตุรัสมีสี่ด้าน และเราจำเป็นต้องมีจุดเริ่มต้น 0% ใช้คำนำหน้าดังที่แสดงด้านล่าง แต่สำหรับบทช่วยสอนที่เหลือ เราจะทำให้มันเรียบง่ายโดยใช้แค่พื้นฐาน 

@-webkit-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-moz-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@-ms-keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

@keyframes circle-to-square {
0%{}
25%{}
50%{}
75%{}
100%{}
}

ตอนนี้ มาสร้างสไตล์บางอย่างเพื่อกำหนดรัศมีของเส้นขอบที่จะปรากฏในแต่ละขั้นตอน: 

@keyframes circle-to-square {
0%  {
border-radius:50%;
}
25%  {
border-radius:50% 50% 50% 0;
}
50%  {
border-radius:50% 50% 0 0;
}
75%  {
border-radius:50% 0 0 0;
}
100% {
border-radius:0 0 0 0;
}
}

เพิ่มคุณสมบัติ background-color เพื่อช่วยแยกความแตกต่างในแต่ละขั้นตอนของแอนิเมชั่น: 

@keyframes circle-to-square {
0%  {
border-radius:50%;
background-color: #6a9bea;
}
25%  {
border-radius:50% 50% 50% 0;
background-color: #90b3ec;
}
50%  {
border-radius:50% 50% 0 0;
background-color: #b0c7ec;
}
75%  {
border-radius:50% 0 0 0;
background-color: #cad7ec;
}
100% {
border-radius:0 0 0 0;
background-color: #dfe3e9;
}
}

สุดท้าย ลองใช้แอนิเมชั่นกับ div ทดสอบ: 

.animationOne {
width: 200px;
height: 200px;
-webkit-animation: circle-to-square 2s 1s infinite alternate;
-moz-animation: circle-to-square 2s 1s infinite alternate;
-ms-animation: circle-to-square 2s 1s infinite alternate;
animation: circle-to-square 2s 1s infinite alternate;
}

โดยทั่วไปคุณสมบัติแอนิเมชั่นจะเขียนด้วยชวเลข ดังนั้นนี่คือสิ่งที่เกิดขึ้นจริงในโค้ด:

  • ชื่อแอนิเมชั่นเป็น circle-to-square
  • ภาพเคลื่อนไหว-ระยะเวลาคือ 2s
  • ภาพเคลื่อนไหวล่าช้าคือ 1s
  • อนิเมชั่น-การวนซ้ำ-นับนั้นไม่มีที่ infinite ดังนั้นมันจะดำเนินต่อไปอย่างไม่มีกำหนด
  • และทิศทางของแอนิเมชั่นก็เป็น alternate ซึ่งหมายความว่าจะเล่นตั้งแต่ต้นจนจบและย้อนกลับไปยังจุดเริ่มต้น

แอนิเมชั่นที่สอง: การหมุน
แอนิเมชั่น-สอง

ภาพเคลื่อนไหวนี้ช่วยให้สามารถหมุนวัตถุได้ 

@keyframes full-rotate {
0%  {
transform: rotate(0deg);
}
25%  {
transform: rotate(45deg);
}
50%  {
transform: rotate(90deg);
}
75%  {
transform: rotate(135deg);
}
100% {
transform: rotate(180deg);
}
}

หากต้องการแยกโปรเจ็กต์แอนิเมชันของเราออกจากกัน อย่าลืมสร้าง div อื่นสำหรับตัวอย่างที่สองนี้ ฉันเพิ่มสีพื้นหลังเพราะเราจะเพิ่มแอนิเมชั่นให้กับ div สำหรับตัวอย่างนี้

ระยะเวลาสำหรับแอนิเมชั่นนี้คือสองวินาที โดยมีการดีเลย์สามวินาที จำนวนการวนซ้ำของแอนิเมชั่นคือห้า ดังนั้นโปรเจ็กต์นี้จะเคลื่อนไหวห้าครั้งก่อนที่จะหยุด แอนิเมชั่นจะเล่นย้อนกลับทุกๆ คี่ (1,3,5,… ) และในทิศทางปกติทุกครั้ง (2,4,6,… )

.animationTwo {
width: 200px;
height: 200px;
background-color: #ccc;
animation: full-rotate 2s 3s 5 alternate-reverse;
}

แอนิเมชั่นที่สาม: ขยายและกะพริบ
แอนิเมชั่น-สาม

นี่เป็นแอนิเมชั่นที่ยอดเยี่ยมสำหรับปุ่ม เพราะมันดึงดูดสายตาและโดดเด่นกว่าเมื่อเปรียบเทียบกับองค์ประกอบอื่นๆ บนหน้า นี่อาจเป็นสิ่งที่ควรค่าแก่การรวมไว้ในสถานะ :hover 

@keyframes button-flicker {
0% {
transform: scale(1);
}
30% {
transform: scale(1);
}
40% {
transform: scale(1.08);
}
50% {
transform: scale(1);
}
60% {
transform: scale(1);
}
70% {
transform: scale(1.05);
}
80% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}

.btn.pulse {
background: #3498db;
background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
background-image: -moz-linear-gradient(top, #3498db, #2980b9);
background-image: -ms-linear-gradient(top, #3498db, #2980b9);
background-image: -o-linear-gradient(top, #3498db, #2980b9);
background-image: linear-gradient(to bottom, #3498db, #2980b9);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px 20px 10px 20px;
text-decoration: none;
animation: button-flicker 5000ms infinite linear;
}

เพื่อใช้ทดสอบสิ่งนี้ เราต้องการ div เริ่มต้นต่อไปนี้: 

.animationThree {
width: 200px;
height: 200px;
}

<div class=”animationThree>
<a class="btn pulse" href="">Click me</a>
</div>

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

@keyframes slide-text {
from {
margin-left: 100%;
width: 200%;
}

to {
margin-left: 0%;
width: 100%;
}
}

h1.slide {
animation-name: slide-text;
animation-duration: 3s;
}

แอนิเมชั่นห้า: จางหายไปใน
แอนิเมชั่น-ห้า

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

@keyframes fade {
from {
opacity: 0;
}

to {
opacity: 1;
}

}

.animationFive {
width: 200px;
height: 200px;
}

.animationFive img{
animation-name: fade;
animation-duration: 3s;
}

<div class=”animationFive”>
<img src=".." />
</div>

แอนิเมชั่น CSS3 นั้นยอดเยี่ยมในการทำให้เว็บไซต์ของคุณเคลื่อนไหวและเซาะร่อง! ตอนนี้คุณมีแนวคิดพื้นฐานในการสร้างแอนิเมชั่นแล้ว ความเป็นไปได้ของแอนิเมชั่นก็ไม่มีที่สิ้นสุด คุณจะเคลื่อนไหวอะไร?