How to Achieve a Fade-Out Effect in CSS3: Keyframe Animations vs. Transitions?

CSS3 Transition - Fade out effect

In CSS3, achieving a fade-out effect can be accomplished through the use of keyframe animations. However, it's important to ensure that the animation settings are configured correctly to achieve the desired effect.

In the code provided, the slideup animation is not working because the top property is being animated, which would move the element vertically off the page. To achieve a fade-out effect, the opacity property should be animated instead. Here's an updated version of the code:

<code class="css">@keyframes slideup {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.dummy-wrap {
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;
}</code>

Alternatively, a more concise approach using CSS3 transitions is available:

<code class="css">.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}</code>

To fade-out an element using this approach, simply add the hidden class to the element:

<code class="css"><div class="success-wrap successfully-saved visible">Saved</div></code>

This will transition the element to opacity: 0 over 2 seconds, creating a fade-out effect. Note that visibility: hidden is added with a delay, allowing the fade-out animation to complete before the element is hidden.

The above is the detailed content of How to Achieve a Fade-Out Effect in CSS3: Keyframe Animations vs. Transitions?. For more information, please follow other related articles on the PHP Chinese website!