คุณสมบัติ CSS Animation จะคงอยู่หลังจากการเคลื่อนไหว


94

ฉันกำลังพยายามทำให้คุณสมบัติแอนิเมชั่น CSS ยังคงอยู่หลังจากทำเสร็จแล้วเป็นไปได้ไหม

นี่คือสิ่งที่ฉันพยายามจะบรรลุ ...

องค์ประกอบควรซ่อนอยู่เมื่อผู้ใช้เข้ามาที่หน้าหลังจาก 3 วินาที (หรืออะไรก็ได้) องค์ประกอบนั้นควรจะจางลงและเมื่อภาพเคลื่อนไหวเสร็จสมบูรณ์แล้วควรอยู่ที่นั่น

นี่คือความพยายามในการเล่นซอ ... http://jsfiddle.net/GZx6F/

นี่คือรหัสสำหรับการเก็บรักษา ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

ฉันรู้วิธีการทำ jQuery .. มันจะเป็นแบบนี้ ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>

เป็นw3schoolsล้าสมัย? มันบอกว่า Chrome และ FireFox รองรับเฉพาะทางเลือกอื่น
iambriansreed

5
@iambriansreed: ฉันคิดว่ามันเป็นเสมอ :)
BoltClock

4
@iambriansreed อย่าแม้แต่คลิกผลการค้นหา w3schools หากคุณเผลอทำให้มองออกไปจากจอภาพของคุณแล้วกดปุ่มย้อนกลับบนเมาส์
doug65536

คำตอบ:


167

ฉันคิดว่าคุณกำลังมองหาanimation-fill-modeคุณสมบัติ CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

คุณสมบัติ CSS โหมดเติมภาพเคลื่อนไหวระบุว่าภาพเคลื่อนไหว CSS ควรใช้สไตล์กับเป้าหมายอย่างไรก่อนและหลังดำเนินการ

เพื่อจุดประสงค์ของคุณเพียงแค่ลองตั้งค่า

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

การตั้งค่าการส่งต่อ «เป้าหมายจะเก็บค่าจากการคำนวณที่กำหนดโดยคีย์เฟรมสุดท้ายที่พบระหว่างการดำเนินการ»


1
ขอบคุณ Fabrizio เยี่ยมมากฉันจะยอมรับคำตอบนั้น มีสิ่งแปลก ๆ เกิดขึ้นที่ฉันสงสัยว่าคุณรู้อะไรหรือไม่ - บน iOS (ยังไม่ได้ทดสอบอะไรเลย) การนับถอยหลังสู่ความง่ายจะหยุดชั่วคราวทุกครั้งที่ฉันเลื่อนเช่นถ้าฉันเริ่มเลื่อนทันทีเมื่อหน้าโหลด มันไม่จางหายไป แต่เมื่อฉันหยุดการเลื่อน 3 วินาทีจะเริ่มนับถอยหลัง นี่เป็นเพียงพฤติกรรมเริ่มต้นของ iOS หรือไม่ ขอบคุณ
SparrwHawk

ช่างเป็นทางออกที่ยอดเยี่ยม
Lalnuntluanga Chhakchhuak

สิ่งนี้มีอยู่ในภาพเคลื่อนไหว SVG แบบดิบหรือไม่
Justin

16

นอกจากนี้ยังมีคำตอบของ@Fabrizio Calderanก็จะต้องมีการบอกว่าคุณยังสามารถใช้animation-fill-modeสถานที่ให้บริการโดยตรงกับforwards animationดังนั้นสิ่งต่อไปนี้ควรใช้งานได้:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>


1

วิธีทำให้องค์ประกอบเคลื่อนไหวและทำให้องค์ประกอบคงอยู่เมื่อภาพเคลื่อนไหวเสร็จสิ้น:

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>


0

ฉันมีบางอย่างที่คล้ายกันเกิดขึ้นกับฉัน ฉันเพิ่มตำแหน่ง: สัมพันธ์กับองค์ประกอบที่เคลื่อนไหวและแก้ไขให้ฉัน

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.