【CSS】การใช้งาน Animation บนองค์กร span

แม้องค์กร span จะเป็นองค์กร inline แต่เมื่อรวมกับ CSS Animation แล้วสามารถเพิ่มเอฟเฟกต์เคลื่อนไหวให้กับส่วนของข้อความได้ บทความนี้จะอธิบายวิธีการใช้งาน display: inline-block และ @keyframes เพื่อสร้างเอฟเฟกต์ Animation บนองค์กร span

ข้อความส่วนนี้กำลังเล่น Animation

ลักษณะเฉพาะของ Animation บน span

ตกแต่งข้อความเฉพาะส่วน: สามารถนำไปใช้กับคำเฉพาะในย่อหน้า
ใช้งานเบา: ใช้แค่ CSS ไม่ต้องพึ่ง JavaScript
ประยุกต์ใช้ได้หลากหลาย: ใช้กับปุ่ม, ฉลาก, การแจ้งเตือน

🔹 โค้ดพื้นฐาน

<span class="highlight">ข้อความ Animation</span>

<style>
.highlight {
  animation: highlight 2s infinite;
  display: inline-block; /* ทำให้สร้าง Animation ได้ */
}

@keyframes highlight {
  0% { background-color: yellow; }
  50% { background-color: orange; transform: scale(1.05); }
  100% { background-color: yellow; }
}
</style>

🧩 การปรับแต่ง Animation

สามารถปรับเปลี่ยนกฎ @keyframes เพื่อสร้างเอฟเฟกต์ Animation ต่างๆ แม้องค์กร span จะเป็น inline โดยปกติ แต่การตั้งค่า display: inline-block จะช่วยให้สามารถ animate คุณสมบัติต่างๆ เช่น ความกว้าง ความสูง และระยะห่างได้

รูปแบบ Animation ทั่วไป

/* การหมุน - เหมาะกับไอคอน */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* การค่อยๆ ปรากฏ - สำหรับองค์กรที่ต้องการเน้น */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* การเด้ง - สำหรับปุ่ม call-to-action */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

จุดสำคัญในการตั้งค่า Animation

animation-iteration-count: infinite สำหรับการเล่นซ้ำไม่สิ้นสุด หรือตัวเลขสำหรับจำนวนครั้งที่ต้องการ
animation-timing-function: ease, linear, ease-in-out ฯลฯ เพื่อปรับคุณภาพการเคลื่อนไหว
animation-delay: หน่วงเวลาก่อนเริ่ม Animation

🎯 ตัวอย่างการใช้งานและข้อควรระวัง

สถานการณ์การใช้งานที่มีประสิทธิภาพ

1. เน้นคำสำคัญ

ข้อความสำคัญในสัญญาหรือจำนวนเงินที่ผู้ใช้ต้องอ่าน

2. คำแนะนำการใช้งาน

ระบุช่องที่ต้องกรอกหรือตัวอย่างในแบบฟอร์ม

3. การแสดงสถานะ

ข้อความเช่น "ใหม่" หรือ "จำนวนจำกัด"

ข้อควรระวัง

✗ การใช้ Animation มากเกินไป

การเพิ่ม Animation ให้กับองค์กรหลายๆ อย่างพร้อมกันอาจทำให้ผู้ใช้สับสนหรือทำให้เนื้อหาสำคัญไม่โดดเด่น

✓ การคำนึงถึงการเข้าถึง

สำหรับผู้ใช้ที่ไวต่อการเคลื่อนไหว ควรมีตัวเลือกปิด Animation โดยใช้ @media (prefers-reduced-motion: reduce)

✗ ผลกระทบต่อประสิทธิภาพ

การ animate คุณสมบัติที่ใช้ทรัพยากรมากเช่น box-shadow หรือ filter อาจทำให้ประสิทธิภาพบนมือถือลดลง

💻 โค้ดสมบูรณ์ที่ใช้งานได้

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ตัวอย่าง Animation บน span</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      text-align: center;
    }
    .highlight {
      animation: highlight 2s infinite;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      display: inline-block;
    }
    @keyframes highlight {
      0% { background-color: #ffeb3b; }
      50% { background-color: #ff9800; transform: scale(1.05); }
      100% { background-color: #ffeb3b; }
    }
  </style>
</head>
<body>
  <p>ข้อความ<span class="highlight">ส่วนนี้</span>กำลังเล่น Animation</p>
</body>
</html>

💯 โค้ดสมบูรณ์ที่ใช้งานได้ (Animation ทั้งหมด + เอฟเฟกต์อินเทอร์แอคทีฟ)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ตัวอย่าง Animation บน span แบบสมบูรณ์</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      padding: 20px;
      max-width: 800px;
      margin: 0 auto;
      background: #f5f5f5;
    }
    .demo-section {
      background: white;
      border-radius: 8px;
      padding: 20px;
      margin: 20px 0;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    h2 {
      color: #333;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
    }

    /* Animation เน้นข้อความพื้นฐาน */
    .highlight {
      animation: highlight 2s infinite;
      padding: 0.2rem 0.4rem;
      border-radius: 4px;
      display: inline-block;
    }
    @keyframes highlight {
      0% { background-color: #ffeb3b; }
      50% { background-color: #ff9800; transform: scale(1.05); }
      100% { background-color: #ffeb3b; }
    }

    /* Animation การหมุน */
    .spin {
      animation: spin 3s linear infinite;
      display: inline-block;
      font-weight: bold;
      color: #2196F3;
    }
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Animation ค่อยๆ ปรากฏ */
    .fade-in {
      animation: fadeIn 2s ease-in-out infinite alternate;
    }
    @keyframes fadeIn {
      from { opacity: 0.3; }
      to { opacity: 1; }
    }

    /* Animation การเด้ง */
    .bounce {
      animation: bounce 1.5s ease infinite;
      display: inline-block;
      color: #4CAF50;
      font-weight: bold;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* Animation พัลส์ (ตัวอย่างจริง) */
    .pulse {
      animation: pulse 1.5s infinite;
      color: #e91e63;
      font-weight: bold;
      padding: 0 5px;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    /* การแสดงคำเตือน */
    .warning {
      animation: warning 1s infinite alternate;
      background: #ff5722;
      color: white;
      padding: 2px 5px;
      border-radius: 3px;
    }
    @keyframes warning {
      from { background: #ff5722; }
      to { background: #ff9800; }
    }

    /* เอฟเฟกต์เมื่อเลื่อนเมาส์มา */
    .hover-effect {
      display: inline-block;
      padding: 5px 15px;
      background: #4285f4;
      color: white;
      border-radius: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      margin-left: 10px;
    }
    .hover-effect:hover {
      background: #3367d6;
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .hover-effect:hover::after {
      content: "คลิกที่นี่!";
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 5px 10px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      animation: fadeIn 0.3s ease-out;
    }
    .hover-effect:active {
      transform: translateY(-1px) scale(0.98);
    }
  </style>
</head>
<body>
  <div class="demo-section">
    <h2>Animation เน้นข้อความพื้นฐาน</h2>
    <p>ข้อความ<span class="highlight">ส่วนนี้</span>มีการเปลี่ยนสีและขนาด</p>
  </div>

  <div class="demo-section">
    <h2>ตัวอย่าง Animation ที่ปรับแต่งเอง</h2>
    
    <h3>Animation การหมุน</h3>
    <p>ไอคอน <span class="spin">⚙️ การตั้งค่า</span> กำลังหมุน</p>
    
    <h3>Animation ค่อยๆ ปรากฏ</h3>
    <p>ข้อความ<span class="fade-in">สำคัญ</span>ค่อยๆ แสดงขึ้น</p>
    
    <h3>Animation การเด้ง</h3>
    <p>กรุณา<span class="bounce">คลิกที่นี่</span>!</p>
  </div>

  <div class="demo-section">
    <h2>ตัวอย่างการใช้งานจริง</h2>
    
    <h3>การเน้นข้อเสนอพิเศษ</h3>
    <p>ใช้<span class="pulse">ข้อเสนอพิเศษ</span>ตอนนี้!</p>
    
    <h3>การแสดงคำเตือน</h3>
    <p><span class="warning">⚠️ สำคัญ</span>: วันนี้เป็นวันสุดท้าย!</p>
    
    <h3>องค์กรอินเทอร์แอคทีฟ (เวอร์ชันปรับปรุง)</h3>
    <p>ลองเลื่อนเมาส์มา <span class="hover-effect">👉 ที่นี่</span></p>
    <ul>
      <li>ปุ่มจะลอยขึ้นและแสดงคำแนะนำเมื่อเลื่อนเมาส์มา</li>
      <li>การคลิกจะมีเอฟเฟกต์กด</li>
      <li>การเปลี่ยนภาพที่ลื่นไหล</li>
    </ul>
  </div>
</body>
</html>

คัดลอกแล้ว!