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

คุณสมบัติ animation-duration กำหนด ระยะเวลาการทำงานของอนิเมชัน

โครงสร้าง

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

ค่า

ค่า	คำอธิบาย
`s`	กำหนดเวลาในหน่วยวินาที (เช่น `3s`)
`ms`	กำหนดเวลาในหน่วยมิลลิวินาที (เช่น `3ms`) หนึ่งวินาที เท่ากับ `1000` มิลลิวินาที

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

ตัวอย่าง

ในตัวอย่างนี้ อนิเมชันจะเล่นเป็นเวลา 3 วินาที:

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

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

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

Результат:

ดูเพิ่มเติม

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