การดูแลรักษาสถานะสุดท้ายเมื่อสิ้นสุดอนิเมชั่น CSS3

ฉันใช้งานแอนิเมชั่นกับองค์ประกอบบางอย่างที่ตั้งค่าไว้opacity: 0;ใน CSS คลาสแอนิเมชั่นถูกนำไปใช้กับคลิกและโดยใช้คีย์เฟรมมันจะเปลี่ยนความทึบจาก0เป็น1(เหนือสิ่งอื่นใด)

น่าเสียดายที่เมื่อภาพเคลื่อนไหวจบลงองค์ประกอบจะกลับไปที่opacity: 0(ทั้ง Firefox และ Chrome) ความคิดตามธรรมชาติของฉันคือองค์ประกอบที่มีภาพเคลื่อนไหวยังคงอยู่ในสถานะสุดท้ายโดยเอาชนะคุณสมบัติดั้งเดิมของพวกเขา สิ่งนี้ไม่จริงหรือ และถ้าไม่ฉันจะทำให้องค์ประกอบทำเช่นนั้นได้อย่างไร

รหัส (ไม่รวมรุ่นนำหน้า):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

animation-fill-mode: forwards;ลองเพิ่ม ตัวอย่างเช่นนี้:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

หากคุณกำลังใช้แอตทริบิวต์ภาพเคลื่อนไหวเพิ่มเติมชวเลขคือ:

animation: bubble 2s linear 0.5s 1 normal forwards;

สิ่งนี้ให้:

• 2s ระยะเวลา
• linear การกำหนดเวลาการทำงาน
• 0.5s ความล่าช้า
• 1 นับซ้ำ (สามารถไม่มีที่สิ้นสุด)
• normal ทิศทาง
• forwards โหมดเติม (ตั้งค่าไปข้างหลังหากคุณต้องการให้มีความเข้ากันได้เพื่อใช้ตำแหน่งสิ้นสุดเป็นสถานะสุดท้าย)

ถ้าไม่ได้ใช้มือ SHORT เวอร์ชัน:ตรวจสอบให้แน่ใจanimation-fill-mode: forwardsคือหลังการประกาศการเคลื่อนไหวหรือมันจะไม่ทำงาน ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

VS

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

ใช้ ภาพเคลื่อนไหวเติมโหมด: ส่งต่อ;

animation-fill-mode: forwards;

องค์ประกอบจะเก็บค่าสไตล์ที่กำหนดโดยคีย์เฟรมสุดท้าย

หมายเหตุ: กฎ @keyframes ไม่รองรับใน Internet Explorer 9 และรุ่นก่อนหน้า

ตัวอย่างการทำงาน

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>