如何通过CSS Keyframes实现元素淡入、停留几秒后淡出？

Hey there! The issue with your current animation is that it jumps straight from fading in to fading out without a pause. Let's adjust the keyframes to add that hold period, plus break down all the settings so you can tweak them easily.

Updated Code #

HTML (no changes needed here!) #

<div class="arrow_case"></div>

CSS (with the pause added) #

.arrow_case {
  width: 100%;
  height: 20vh;
  opacity: 0;
  /* Total time for fade-in + stay + fade-out */
  animation: arrowInOut 6s linear forwards;
  /* Optional: Wait 1s before the animation starts */
  animation-delay: 1s;
  /* Note: -webkit- prefixes are mostly unnecessary now for modern browsers */
}

@keyframes arrowInOut {
  0% { opacity: 0; }
  /* Finish fading in at 20% of total duration */
  20% { opacity: 1; }
  /* Stay fully visible from 20% to 80% (this is your pause window) */
  80% { opacity: 1; }
  /* Finish fading out at 100% */
  100% { opacity: 0; }
}

Key Settings Breakdown #

Let's break down how to customize this to your exact needs:

• Total Animation Duration: The 6s in animation: arrowInOut 6s... controls the full cycle length. Make it shorter for a faster sequence, longer for slower transitions.
• Fade In/Out Speed: Adjust the percentage values to tweak how quickly the element fades. For example, setting the first keyframe to 10% instead of 20% makes the fade-in happen in 0.6 seconds instead of 1.2.
• Stay Duration: The gap between the second and third keyframes (20% to 80% here) is your pause time. Widen this gap to make the element stay visible longer—like 15% to 85% would give you 70% of the total duration as hold time.
• Animation Delay: animation-delay: 1s adds a 1-second wait before the animation starts. Remove this line or change the value if you want it to begin immediately.
• forwards Keyword: This keeps the element at the animation's final state (opacity 0) instead of resetting to its initial style. If you want the animation to loop nonstop, replace forwards with infinite.

Quick Example for a Shorter Hold Time #

If you only want the element to stay visible for 1 second, adjust the keyframes and total duration like this:

animation: arrowInOut 4s linear forwards;

@keyframes arrowInOut {
  0% { opacity: 0; }
  25% { opacity: 1; } /* Fade in over 1 second */
  50% { opacity: 1; } /* Stay for 1 second */
  100% { opacity: 0; } /* Fade out over 2 seconds */
}

内容的提问来源于stack exchange，提问作者NewCodeMan