Articles
แนะนำ CSS
คุณสมบัติ CSS ที่เกี่ยวข้องกับการเคลื่อนไหว

คุณสมบัติ CSS ที่เกี่ยวข้องกับการเคลื่อนไหว

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับการเคลื่อนไหว

คุณสามารถเรียนรู้เกี่ยวกับการใช้งานและไวยากรณ์ของคุณสมบัติ @keyframes, animation และ transition

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-animation.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-animation.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Animation</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Animation Related Properties</h2>
20        </header>
21        <article>
22            <h3>@keyframes</h3>
23            <section>
24                <h4>Animation Examples</h4>
25                <header><h4>animation: slide 3s ease infinite</h4></header>
26                <section class="sample-view">
27                    <div class="box-animation-slide">Slide Box</div>
28                </section>
29                <header><h4>animation: color-change 3s ease infinite</h4></header>
30                <section class="sample-view">
31                    <div class="box-animation-color-change">Color Change Box</div>
32                </section>
33                <header><h4>animation: fade 3s ease infinite</h4></header>
34                <section class="sample-view">
35                    <div class="box-animation-fade">Fade Box</div>
36                </section>
37            </section>
38        </article>
39        <article>
40            <h3>animation</h3>
41            <section>
42                <h4>Animation Examples</h4>
43                <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44                <section class="sample-view">
45                    <div class="box-animation-ease-in-out">Slide Box</div>
46                </section>
47                <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48                <section class="sample-view">
49                    <div class="box-animation-alternate">Color Change Box</div>
50                </section>
51            </section>
52        </article>
53        <article>
54            <h3>transition</h3>
55            <section>
56                <h4>Transition Examples</h4>
57                <header><h4>transition: background-color 2s ease</h4></header>
58                <section class="sample-view">
59                    <div class="transition-box">Hover me!</div>
60                </section>
61                <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62                <section class="sample-view">
63                    <div class="transition-2-properties">Hover me!</div>
64                </section>
65            </section>
66        </article>
67    </main>
68</body>
69</html>

การเคลื่อนไหวและการเปลี่ยนแปลง

กฎ @keyframes 

 1/* Animation definition */
 2@keyframes slide {
 3    0% {
 4        transform: translateX(0);
 5    }
 6    50% {
 7        transform: translateX(200px);
 8    }
 9    100% {
10        transform: translateX(0);
11    }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16    width: 100px;
17    height: 100px;
18    background-color: skyblue;
19    animation: slide 3s ease infinite;
20}

@keyframes ถูกใช้ใน CSS เพื่อระบุว่ารูปแบบจะเปลี่ยนไปอย่างไรในระหว่างการเคลื่อนไหว ใน @keyframes การเปลี่ยนแปลงของรูปแบบจากจุดเริ่มต้นถึงจุดสิ้นสุดของการเคลื่อนไหวถูกระบุด้วยเปอร์เซ็นต์ของเวลา หรือคำสำคัญ (from และ to)

  • นี่คือตัวอย่างของการเคลื่อนไหวที่องค์ประกอบเลื่อนจากซ้ายไปขวาแล้วกลับสู่ตำแหน่งเดิม
  • ในตัวอย่างนี้ slide ถูกเขียนหลัง @keyframes เพื่อกำหนดการเคลื่อนไหวที่ชื่อว่า slide
  • 0% คือจุดเริ่มต้นของการเคลื่อนไหว โดยใช้ translateX(0) กำหนดตำแหน่งขององค์ประกอบให้อยู่ที่ตำแหน่งเดิม
  • 50% คือช่วงกลางของการเคลื่อนไหว โดยที่องค์ประกอบเคลื่อนที่ไปทางขวา 200px ด้วยการใช้ translateX(200px)
  • 100% คือตอนจบของการเคลื่อนไหว โดยองค์ประกอบจะกลับคืนสู่ตำแหน่งเดิม
  • ในคลาส box-animation-slide คุณสมบัติ animation ถูกใช้เพื่อใช้งานการเคลื่อนไหว slide ในช่วงเวลา 3 วินาที
 1@keyframes color-change {
 2    0% {
 3        background-color: red;
 4    }
 5    25% {
 6        background-color: blue;
 7    }
 8    50% {
 9        background-color: green;
10    }
11    75% {
12        background-color: yellow;
13    }
14    100% {
15        background-color: red;
16    }
17}
18
19.box-animation-color-change {
20    width: 100px;
21    height: 100px;
22    background-color: skyblue;
23    animation: color-change 3s ease infinite;
24}
  • คุณสามารถควบคุมรูปแบบได้อย่างละเอียดในระหว่างการเคลื่อนไหว โดยการระบุเปอร์เซ็นต์ คุณสามารถกำหนดรูปแบบที่แตกต่างกันในช่วงเวลาที่คุณต้องการ
    • ในตัวอย่างนี้ สีจะเปลี่ยนจากสีแดงไปเป็นสีน้ำเงิน สีเขียว สีเหลือง และกลับมาที่สีแดงทีละขั้น
 1@keyframes fade {
 2    from {
 3        opacity: 0;
 4    }
 5    to {
 6        opacity: 1;
 7    }
 8}
 9
10.box-animation-fade {
11    width: 100px;
12    height: 100px;
13    background-color: blue;
14    animation: fade 3s ease infinite;
15}
  • ในตัวอย่างนี้ from เทียบเท่ากับ 0% และ to เทียบเท่ากับ 100% สิ่งนี้ช่วยให้คุณสามารถกำหนดการเคลื่อนไหวที่ง่ายๆ ได้

ไวยกรณ์พื้นฐาน 

 1@keyframes animation-name {
 2    0% {
 3        /* Style at the start */
 4    }
 5    50% {
 6        /* Style at the midpoint */
 7    }
 8    100% {
 9        /* Style at the end */
10    }
11}
  • animation-name: ชื่อของการเคลื่อนไหว สิ่งนี้ถูกกำหนดโดยใช้พร็อพเพอร์ตี้ animation หรือพร็อพเพอร์ตี้ animation-name
  • เปอร์เซ็นต์หรือคำสำคัญ: ใช้เปอร์เซ็นต์ตั้งแต่ 0% ถึง 100% หรือคำสำคัญ from (เทียบเท่ากับ 0%) และ to (เทียบเท่ากับ 100%)

คุณสมบัติ animation 

1.box-animation-ease-in-out {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: slide 3s ease-in-out infinite;
6}

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

  • คลาส box-animation-ease-in-out กำหนด slide เป็น animation-name และใช้แอนิเมชัน slide ที่กำหนดไว้ใน @keyframes
    • 3s คือ animation-duration หมายความว่าแต่ละรอบของแอนิเมชันจะเสร็จสิ้นในเวลา 3 วินาที
    • ease-in-out คือ animation-timing-function ซึ่งทำให้แอนิเมชันเริ่มต้นช้า จากนั้นเร่งความเร็ว และจบลงด้วยการช้าลงอีกครั้ง
    • infinite คือ animation-iteration-count หมายความว่าแอนิเมชันจะทำซ้ำไปเรื่อย ๆ โดยไม่มีสิ้นสุด
1.box-animation-alternate {
2    width: 100px;
3    height: 100px;
4    background-color: skyblue;
5    animation: color-change 3s ease-in-out 1s 3 alternate;
6}
  • คลาส box-animation-alternate กำหนด color-change เป็น animation-name และใช้แอนิเมชัน color-change ที่กำหนดไว้ใน @keyframes
    • 1s ที่ตามหลัง ease-in-out คือ animation-delay ซึ่งกำหนดเวลาที่แอนิเมชันจะล่าช้าก่อนเริ่ม แอนิเมชันจะเริ่มหลังจากผ่านไป 1 วินาที
    • 3 ที่ตามหลัง 1s คือ animation-iteration-count หมายความว่าแอนิเมชันจะทำซ้ำ 3 ครั้ง
    • alternate คือ animation-direction ซึ่งกำหนดทิศทางการเล่นของแอนิเมชัน alternate กำหนดว่าแอนิเมชันจะเล่นสลับไปมา

องค์ประกอบของคุณสมบัติ animation

คุณสมบัติ animation เป็นคุณสมบัติย่อที่รวมคุณสมบัติย่อยหลายอย่างไว้ด้วยกัน นี่คือคุณสมบัติย่อยหลัก ๆ:

  • animation-name: กำหนดชื่อของแอนิเมชันที่จะนำไปใช้ ชื่อจะต้องตรงกับชื่อของแอนิเมชันที่กำหนดใน @keyframes
  • animation-duration: กำหนดเวลาที่ใช้สำหรับแอนิเมชันในแต่ละรอบ หน่วยเวลาเป็นวินาที (s) หรือมิลลิวินาที (ms)
  • animation-timing-function: กำหนดเส้นโค้งความเร็วของแอนิเมชัน ค่าต่าง ๆ เช่น ease, linear, ease-in, ease-out, ease-in-out, เป็นต้น ถูกนำมาใช้
    • การกำหนดค่า ease จะทำให้แอนิเมชันเริ่มต้นอย่างช้า เร่งความเร็ว และจบลงด้วยการช้าลงอีกครั้ง
    • การกำหนดค่า linear ทำให้แอนิเมชันดำเนินไปด้วยความเร็วคงที่ตั้งแต่ต้นจนจบ
    • การกำหนดค่า ease-in จะทำให้แอนิเมชันเริ่มต้นอย่างช้า ๆ และเร่งเร็วในตอนท้าย
    • การกำหนดค่า ease-out จะทำให้แอนิเมชันเริ่มต้นอย่างรวดเร็วและช้าลงในตอนท้าย
    • การกำหนดค่า ease-in-out จะทำให้แอนิเมชันเริ่มต้นอย่างช้า ๆ เร่งความเร็วขึ้นระหว่างทาง และช้าลงในตอนท้าย
  • คุณสมบัติ animation-delay ใช้กำหนดเวลาหน่วงก่อนที่แอนิเมชันจะเริ่มต้น หน่วยเวลาคือวินาทีหรือมิลลิวินาที
  • คุณสมบัติ animation-iteration-count ใช้กำหนดจำนวนครั้งที่แอนิเมชันควรถูกเล่นซ้ำ การกำหนดค่า infinite จะทำให้แอนิเมชันเล่นซ้ำไปเรื่อย ๆ ไม่สิ้นสุด
  • คุณสมบัติ animation-direction ใช้กำหนดทิศทางการเล่นแอนิเมชัน ตัวเลือกได้แก่ normal (เล่นไปข้างหน้า), reverse (เล่นถอยหลัง), alternate (เล่นสลับกันไปมา), และ alternate-reverse (เล่นสลับโดยเริ่มถอยหลัง)
  • คุณสมบัติ animation-fill-mode ใช้กำหนดสถานะของแอนิเมชันก่อนเริ่มต้นและหลังจากสิ้นสุด คุณสามารถกำหนดค่าเป็น none, forwards, backwards, หรือ both
  • คุณสมบัติ animation-play-state ใช้กำหนดว่าแอนิเมชันกำลังทำงานหรือหยุดชั่วคราว คุณสามารถกำหนดค่าเป็น running หรือ paused

สรุป

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

คุณสมบัติ transition 

 1.transition-box {
 2    background-color: lightgray;
 3    transition: background-color 2s ease;
 4}
 5
 6.transition-box:hover {
 7    background-color: steelblue;
 8}
 9
10.transition-2-properties {
11    background-color: lightgray;
12    width: 150px;
13    height: 50px;
14    transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18    background-color: blue;
19    width: 250px;
20}

คุณสมบัติ transition ใช้สำหรับเพิ่มเอฟเฟกต์แอนิเมชันให้กับการเปลี่ยนแปลงสไตล์ CSS มันทำให้การเปลี่ยนแปลงดูราบรื่นในระหว่างการเปลี่ยนสถานะ เช่น hover, focus, active, หรือเมื่อสไตล์ถูกเปลี่ยนแปลงแบบไดนามิกด้วย JavaScript

ลองดูตัวอย่างคลาส transition-box ที่สีพื้นหลังเปลี่ยนแปลงอย่างราบรื่นเมื่อเอาเมาส์ไปวางเหนือปุ่ม - ในคลาส transition-box คุณสมบัติ transition ใช้เวลาการเปลี่ยนแปลงสีพื้นหลัง 2 วินาที การเปลี่ยนแปลงถูกกำหนดค่าเป็น ease ซึ่งทำให้ดูราบรื่น - คลาสจำลอง hover เปลี่ยนสีพื้นหลังจาก lightgray เป็น steelblue เมื่อเอาเมาส์ไปวางเหนือปุ่ม การเปลี่ยนแปลงนี้เกิดขึ้นอย่างราบรื่นในช่วงเวลา 2 วินาทีที่กำหนดไว้ในคลาส transition-box

สามารถใช้ transition กับหลายคุณสมบัติพร้อมกันได้ - ในตัวอย่างคลาส transition-2-properties สีพื้นหลังเปลี่ยนใน 5 วินาที และความกว้างเปลี่ยนใน 0.5 วินาที

ไวยกรณ์พื้นฐาน 

1/* Basic syntax of transition */
2transition: property duration timing-function delay;
  • คำสั่ง property ระบุว่าแอนิเมชันจะถูกนำไปใช้กับคุณสมบัติ CSS ใด การระบุ all จะใช้แอนิเมชันกับคุณสมบัติทั้งหมด
  • คำสั่ง duration ระบุระยะเวลาที่ใช้ในการทำให้แอนิเมชันเสร็จสมบูรณ์ ระบุโดยใช้วินาที (s) หรือมิลลิวินาที (ms)
  • คำสั่ง timing-function ระบุการเปลี่ยนแปลงความเร็วของแอนิเมชัน คุณสามารถใช้ตัวเลือก เช่น ease, linear, ease-in, ease-out, ease-in-out เป็นต้น
  • คำสั่ง delay ระบุระยะเวลาหน่วงก่อนที่แอนิเมชันจะเริ่มต้น ระบุเป็นวินาทีหรือมิลลิวินาที

คุณสมบัติโดยละเอียดของ transition 

1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;

transition สามารถใช้งานเป็นคุณสมบัติเฉพาะต่าง ๆ ได้ดังนี้

  • transition-property: ระบุคุณสมบัติที่แอนิเมชันจะถูกนำไปใช้
  • transition-duration: ระบุระยะเวลาที่แอนิเมชันจะเสร็จสมบูรณ์
  • transition-timing-function: ระบุความเร็วของการเปลี่ยนแปลงแอนิเมชัน สามารถใช้ตัวเลือก เช่น ease, linear, ease-in, ease-out, ease-in-out ได้
  • transition-delay: ระบุเวลาหน่วงก่อนที่แอนิเมชันจะเริ่มต้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับเอฟเฟกต์ฟิลเตอร์คุณสมบัติของ CSS ที่เกี่ยวข้องกับแอนิเมชัน 3D