คุณสมบัติ animation-delay

คุณสมบัติ animation-delay กำหนด การหน่วงเวลาก่อนเริ่มแอนิเมชัน

ไวยากรณ์

cssตัวเลือก {
  animation-delay: เวลาใน s หรือ ms;
}

ค่า

ค่า	คำอธิบาย
`s`	ระบุเวลาเป็นวินาที (ตัวอย่างเช่น `3s`)
`ms`	ระบุเวลาเป็นมิลลิวินาที (ตัวอย่างเช่น `3ms`) หนึ่งวินาทีเท่ากับ `1000` มิลลิวินาที

ค่าเริ่มต้น: 0s

ตัวอย่าง

ในตัวอย่างนี้ จะมีการหน่วงเวลา 3 วินาทีก่อนเริ่มแอนิเมชัน:

html<div id="elem"></div>

css@keyframes move {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation-delay: 3s;
  animation-duration: 6s;
  animation-name: move;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

ดูเพิ่มเติม

คุณสมบัติ animation-name,
ซึ่งกำหนดชื่อแอนิเมชัน
คุณสมบัติ animation-duration,
ซึ่งกำหนดระยะเวลาแอนิเมชัน
คุณสมบัติ animation-timing-function,
ซึ่งกำหนดความเร็วในการดำเนินแอนิเมชัน
คุณสมบัติ animation-iteration-count,
ซึ่งกำหนดจำนวนรอบการทำงานของแอนิเมชัน
คุณสมบัติ animation-direction,
ซึ่งกำหนดทิศทางของแอนิเมชัน
คุณสมบัติ animation-fill-mode,
ซึ่งกำหนดสถานะของแอนิเมชัน
คุณสมบัติ animation-play-state,
ซึ่งช่วยให้หยุดแอนิเมชันชั่วคราวได้
คุณสมบัติ animation,
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับแอนิเมชัน
คำสั่ง @keyframes,
ซึ่งกำหนดเฟรมหลักของแอนิเมชัน
การเปลี่ยนผ่านอย่างราบรื่น transition, ซึ่งเป็นแอนิเมชันเมื่อวางเมาส์เหนือองค์ประกอบ