CSS3 过渡 - 淡出效果

Posted 2023-03-06

技术标签:

【中文标题】CSS3 过渡 - 淡出效果【英文标题】：CSS3 Transition - Fade out effect 【发布时间】：2013-04-01 04:28:31 【问题描述】：

我正在尝试在纯 CSS 中实现“淡出”效果。这是fiddle。我确实在网上研究了几个解决方案，但是，在阅读了documentation online 之后，我试图弄清楚为什么幻灯片动画不起作用。有什么指点吗？

.dummy-wrap 
  animation: slideup 2s;
  -moz-animation: slideup 2s;
  -webkit-animation: slideup 2s;
  -o-animation: slideup 2s;


.success-wrap 
  width: 75px;
  min-height: 20px;
  clear: both;
  margin-top: 10px;


.successfully-saved 
  color: #FFFFFF;
  font-size: 20px;
  padding: 15px 40px;
  margin-bottom: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #00b953;


@keyframes slideup 
  0% top: 0px;
  75% top: 0px;
  100% top: -20px;


@-moz-keyframes slideup 
  0% top: 0px;
  75% top: 0px;
  100% top: -20px;


@-webkit-keyframes slideup 
  0% top: 0px;
  75% top: 0px;
  100% top: -20px;


@-o-keyframes slideup 
  0% top: 0px;
  75% top: 0px;
  100% top: -20px;

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

【问题讨论】：

【参考方案1】：

您忘记在.dummy-wrap 类中添加位置属性，并且上/左/下/右值不适用于静态定位的元素（默认）

http://jsfiddle.net/dYBD2/2/

【讨论】：

谢谢，但是在过渡后我将如何隐藏？有几种方法 - 您可以增加 top 值，使其“移出”视口，或者您可以为动画使用不透明度，使其像您想要的那样淡出。 . 太棒了.. 我明白了，但还有一个问题，为什么隐藏的 div 会重新淡出？【参考方案2】：

您可以改用过渡：

.successfully-saved.hide-opacity
    opacity: 0;


.successfully-saved 
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;

【讨论】：

现在不需要浏览器前缀，只是普通的 ol' ... 过渡：不透明 3s 缓入出局；【参考方案3】：

这是另一种方法。

淡入效果

.visible 
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;

淡出效果

.hidden 
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;

UPDATE 1: 我在这里找到了更多最新的教程 CSS3 Transition: fadeIn and fadeOut like effects to hide show elements 和 Tooltip Example: Show Hide Hint or Help Text using CSS3 Transition 以及示例代码。

UPDATE 2:（@big-money 要求添加详细信息）

当显示元素时（通过切换到可见类），我们希望visibility:visible 立即启动，所以只转换 opacity 属性是可以的。而在隐藏元素时（通过切换到隐藏类），我们要延迟visibility:hidden声明，这样我们就可以先看到淡出过渡。我们通过在可见性属性上声明一个过渡来做到这一点，持续时间为 0 并有延迟。可以看详细文章here。

我知道我来不及回答，但发布此答案以节省其他人的时间。希望对你有帮助！！

【讨论】：

不错的答案，我希望添加 display:none 以在“隐藏”动画结束时擦除框，知道吗？我不确定您在这里需要什么，但您可以尝试在 .visible 类中使用 display:block 而不是 visibility: visible，同样在上面的 display:none 中使用 display:none 而不是 visibility: hidden例子。 @MMTac 这不起作用，因为display 不是animatable CSS properties 之一。见Animating from “display: block” to “display: none”。【参考方案4】：

.fadeOut
    background-color: rgba(255, 0, 0, 0.83);
    border-radius: 8px;
    box-shadow: silver 3px 3px 5px 0px;
    border: 2px dashed yellow;
    padding: 3px;

.fadeOut.end
    transition: all 1s ease-in-out;
    background-color: rgba(255, 0, 0, 0.0);
    box-shadow: none;
    border: 0px dashed yellow;
    border-radius: 0px;

demo here.

【讨论】：

【参考方案5】：

这是您问题的有效代码。享受编码......

<html>
   <head>

      <style>

         .animated 
            background-color: green;
            background-position: left top;
            padding-top:95px;
            margin-bottom:60px;
            -webkit-animation-duration: 10s;animation-duration: 10s;
            -webkit-animation-fill-mode: both;animation-fill-mode: both;
         

         @-webkit-keyframes fadeOut 
            0% opacity: 1;
            100% opacity: 0;
         

         @keyframes fadeOut 
            0% opacity: 1;
            100% opacity: 0;
         

         .fadeOut 
            -webkit-animation-name: fadeOut;
            animation-name: fadeOut;
         
      </style>

   </head>
   <body>

      <div id="animated-example" class="animated fadeOut"></div>

   </body>
</html>

【讨论】：

请附上您的解决方案的说明：它是如何工作的？为什么它与已经发布的其他解决方案不同？ @lifeisfoo 我尝试了所有解决方案，但这是最简单和最简单的方法，更重要的是文本会在几秒钟后自动消失 (10)。所以不需要任何点击。【参考方案6】：

因为display 不是动画CSS 属性之一。一个display:nonefadeOut 动画替换为纯CSS3 动画，只需在最后一帧设置width:0 和height:0，并使用animation-fill-mode: forwards 保留width:0 和height:0 属性。

@-webkit-keyframes fadeOut 
    0%  opacity: 1;
    99%  opacity: 0.01;width: 100%; height: 100%;
    100%  opacity: 0;width: 0; height: 0;
  
@keyframes fadeOut 
    0%  opacity: 1;
    99%  opacity: 0.01;width: 100%; height: 100%;
    100%  opacity: 0;width: 0; height: 0;


.display-none.on
    display: block;
    -webkit-animation: fadeOut 1s;
    animation: fadeOut 1s;
    animation-fill-mode: forwards;

【讨论】：

查看High Performance Animations。您应该避免使用触发重新布局的 CSS 属性，width 和 height 都是敏感的。【参考方案7】：

这可能会有所帮助：-

<!DOCTYPE html>
<html>
<head>
<style>

.cardiv
    height:200px;
    width:100px;
    background-color:red;
    position:relative;
    text-align:center;
    overflow:hidden;

.moreinfo
    height:0%;
    transition: height 0.5s;
    opacity:1;
    position: absolute;
    bottom:0px;
    background-color:blue;


.cardiv:hover .moreinfo

    opacity: 1;
    height:100px;

</style>
</head>
<body>

<div class="cardiv">
    <div class="moreinfo">Hello I am inside div</div>
</div>

</body>
</html>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。【参考方案8】：

在 CSS 中使用 forwards 填充模式，使其保留在动画的最后部分。

我建议使用transform: tranlsateY(-20px);而不是使用css位置，但如果你坚持使用它，那么将.dummy-wrap位置设置为absolute

.dummy-wrap 
  animation: slideup 2s forwards;
  -moz-animation: slideup 2s forwards;
  -webkit-animation: slideup 2s forwards;
  -o-animation: slideup 2s forwards;
  position: absolute;


@keyframes slideup 
    0% 
        top: 0px;
    
    75% 
        top: 0px;
    
    100% 
        top: -20px;

<div class="dummy-wrap">
  <div class="success-wrap successfully-saved">Saved</div>
</div>

【讨论】：

以上是关于CSS3 过渡 - 淡出效果的主要内容，如果未能解决你的问题，请参考以下文章

CSS 过渡 - 仅在悬停时淡入淡出元素

利用CSS3制作淡入淡出动画效果

如何使用 JQuery 添加淡入淡出或图像过渡效果？

使用 CSS 过渡的滑动 + 淡入淡出效果

Vue.js 页面过渡淡入淡出效果与 vue-router

使背景淡出/淡入