หยุดการเคลื่อนไหวของ CSS3 ในเฟรมสุดท้าย

ฉันมีภาพเคลื่อนไหว CSS3 4 ส่วนที่เล่นอยู่บนการคลิก - แต่ส่วนสุดท้ายของภาพเคลื่อนไหวนั้นมีจุดประสงค์เพื่อนำมันออกจากหน้าจอ

อย่างไรก็ตามมันจะกลับไปสู่สถานะดั้งเดิมเสมอเมื่อเล่นแล้ว ใคร ๆ ก็รู้ว่าฉันจะหยุดมันได้อย่างไรในเฟรม css สุดท้าย (100%)หรืออื่น ๆ วิธีกำจัด div ทั้งหมดในครั้งเดียวที่มันเล่น

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

คุณกำลังมองหา:

animation-fill-mode: forwards;

ข้อมูลเพิ่มเติมเกี่ยวกับ MDNและรายชื่อสนับสนุนเบราว์เซอร์บนcanIuse

หากคุณต้องการเพิ่มลักษณะการทำงานนี้ลงในanimationคำจำกัดความของคุณสมบัติชวเลขลำดับของคุณสมบัติย่อยจะเป็นดังนี้

animation-name- ค่าเริ่มต้น none

animation-duration- ค่าเริ่มต้น 0s

animation-timing-function- ค่าเริ่มต้น ease

animation-delay- ค่าเริ่มต้น 0s

animation-iteration-count- ค่าเริ่มต้น 1

animation-direction- ค่าเริ่มต้น normal

animation-fill-mode- คุณต้องตั้งค่านี้เป็น forwards

animation-play-state- ค่าเริ่มต้น running

ดังนั้นในกรณีที่พบบ่อยที่สุดผลลัพธ์จะเป็นแบบนี้

animation: colorchange 1s ease 0s 1 normal forwards;

ดูเอกสาร MDN ที่นี่

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

รองรับเบราว์เซอร์

• Chrome 43.0 (4.0 -webkit-)
• IE 10.0
• Mozilla 16.0 (5.0 -moz-)
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit- (12.112.0 -o-)

การใช้งาน: -

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

วิธีที่ดีที่สุดดูเหมือนจะทำให้รัฐสุดท้ายที่ส่วนหลักของ CSS เช่นเดียวกับที่นี่ฉันใส่ความกว้างเพื่อที่ว่าในที่สุดมันก็จะกลายเป็น220px 220pxแต่เริ่มที่0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}  

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

ฉันเพิ่งโพสต์คำตอบที่คล้ายกันและคุณอาจต้องการดู:

http://www.w3.org/TR/css3-animations/#animation-events-

คุณสามารถค้นหาแง่มุมต่าง ๆ ของแอนิเมชันเช่นเริ่มและหยุดจากนั้นเมื่อพูดว่าเหตุการณ์ 'หยุด' ทำให้คุณไม่สามารถทำอะไรก็ได้ที่คุณต้องการ ฉันลองมันเมื่อไม่นานมานี้และมันสามารถใช้งานได้ แต่ฉันคิดว่าคุณจะถูก จำกัด ให้ใช้ webkit ในขณะนั้น Btw เนื่องจากฉันโพสต์ลิงก์เดียวกันสำหรับ 2 คำตอบฉันจะให้คำแนะนำทั่วไปนี้: ตรวจสอบ W3C - พวกเขาเขียนกฎและอธิบายมาตรฐาน นอกจากนี้หน้าการพัฒนา webkit ก็เป็นสิ่งสำคัญเช่นกัน

ไม่มีใครที่จริงได้นำมันมาใช้วิธีการทำงานคือชุดแอนิเมชั่นเพลย์รัฐหยุดไว้ชั่วคราว

ฉันเรียนรู้ในวันนี้ว่ามีข้อ จำกัด ที่คุณต้องการใช้สำหรับโหมดเติม นี่คือจาก dev ของ Apple ข่าวลือคือ * ประมาณ * หก แต่ไม่แน่ใจ อีกทางหนึ่งคุณสามารถตั้งค่าสถานะเริ่มต้นของชั้นเรียนของคุณเป็นวิธีที่คุณต้องการให้ภาพเคลื่อนไหวสิ้นสุดแล้ว * เริ่มต้น * ได้ที่ / 0%