CSS Animation Shorthand Property

Shorthand property สำหรับกำหนดคุณสมบัติแอนิเมชันทั้งหมดในบรรทัดเดียวคือ animation รวมถึง animation-duration, animation-name, และอื่นๆ

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่างเพื่อเรียนรู้ Animation Shorthand property:

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      width: 150px;
      height: 200px;
      background-color: yellow;
      animation: myanim 2s;
    }
    @keyframes myanim {
      from { background-color: green; }
      to { background-color: blue; }
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

รูปแบบเต็มของ Shorthand: animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name - ชื่อ @keyframes (บังคับ)
• duration - ระยะเวลา (บังคับ)
• อื่นๆ - optional มีค่าเริ่มต้น

ตัวอย่าง: animation: slidein 3s ease-in 1s 2 alternate forwards running;