คอร์ส IT พื้นฐาน CSS 027_แอนิเมชันและการเปลี่ยนผ่าน

แอนิเมชัน

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

ไวยากรณ์ของคุณสมบัติ animation มีดังนี้:

• name: กำหนดชื่อของแอนิเมชัน
• duration: กำหนดระยะเวลาของแอนิเมชัน
• timing-function: กำหนดเส้นโค้งความเร็วของแอนิเมชัน
• delay: กำหนดการหน่วงเวลาของแอนิเมชัน
• iteration-count: กำหนดจำนวนครั้งในการเล่นแอนิเมชัน
• direction: กำหนดทิศทางการเล่นแอนิเมชัน
• fill-mode: กำหนดสไตล์ของอิลิเมนต์หลังจากแอนิเมชันเสร็จสิ้นหรือเมื่อแอนิเมชันถูกหยุดชั่วคราวหรือหยุด

ตัวอย่าง:

1
    @keyframes animationName{
2
    from {
3
        transform: rotate(0deg);
4
      }
5
      to {
6
        transform: rotate(360deg);
7
        }
8
    }
9
    .example1{
10
    width: 100px;
11
      height: 100px;
12
      background-color: #3498db;
13
      animation: animationName 2s linear infinite; /* ใช้แอนิเมชัน ระยะเวลา 2 วินาที วนซ้ำไม่จำกัด การเปลี่ยนผ่านแบบเส้นตรง */
14
  }

1
    <div class="example1"></div>

ผลลัพธ์:

• @keyframes rotate กำหนดแอนิเมชัน keyframe ชื่อ rotate จากสถานะเริ่มต้น (หมุน 0 องศา) ไปจนถึงสถานะสิ้นสุด (หมุน 360 องศา)
• อิลิเมนต์ .animated-box ใช้แอนิเมชันนี้ โดยกำหนดชื่อแอนิเมชัน ระยะเวลา รูปแบบการวนซ้ำ เป็นต้น ผ่านคุณสมบัติ animation

แอนิเมชัน CSS และการเปลี่ยนผ่าน CSS เป็นเอฟเฟกต์ที่สามารถเปลี่ยนค่าคุณสมบัติของอิลิเมนต์อย่างค่อยเป็นค่อยไป ความแตกต่างหลักคือ:

• แอนิเมชันสามารถเล่นซ้ำได้ แต่การเปลี่ยนผ่านเล่นได้เพียงครั้งเดียว
• แอนิเมชันสามารถกำหนดทิศทางการเล่นได้ แต่การเปลี่ยนผ่านไม่ได้
• แอนิเมชันสามารถกำหนดสไตล์ของอิลิเมนต์หลังจากเสร็จสิ้นหรือเมื่อหยุดชั่วคราว/หยุดได้ แต่การเปลี่ยนผ่านไม่ได้

การเปลี่ยนผ่าน

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

ตัวอย่าง:

1
    .example1{
2
        width: 200px;
3
        height: 200px;
4
        background-color: #3498db;
5
        transition: background-color 0.5s ease; /* กำหนดคุณสมบัติและเวลาการเปลี่ยนผ่าน */
6
        }
7
    .example1:hover{
8
        background-color: #e74c3c;
9
        }

1
    <div class="example1"></div>

ผลลัพธ์: