logo标签列表

CSS3过渡 - 淡出效果

csscss-transitions
136

我在尝试用纯CSS实现“淡出”效果。这是示例。我查阅了一些在线解决方案，但在阅读在线文档后，仍然无法弄清为什么滑动动画不起作用。有什么指针吗？

.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>

9个回答
255

这里是另一种实现相同效果的方法。

淡入效果

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

淡出效果

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

更新 1： 我找到了一个更为新的教程，CSS3过渡动画: 使用fadeIn和fadeOut效果来隐藏显示元素 和 工具提示示例：使用CSS3过渡动画显示/隐藏提示或帮助文本 ，这里有示例代码。

更新 2：（添加了@big-money所请求的详细信息）

当显示元素（通过切换到可见类）时，我们希望visibility:visible立即生效，因此仅对不透明度属性进行过渡是可以的。而当隐藏元素（通过切换到隐藏类）时，我们想要延迟visibility:hidden声明，以便我们可以先看到淡出过渡效果。我们通过在visibility属性上声明一个过渡，设置0秒的持续时间和延迟来实现这一点。您可以在这里查看详细的文章。

我知道我回答得太晚了，但发布这个答案是为了节省其他人的时间。

12
好的回答。我想要添加 display:none 来在“隐藏”动画结束时擦除该框，有什么建议吗？ - Apolo
1
我不确定你需要什么，但你可以尝试在.visible类中使用display:block，在上面的例子中，在.hidden类中使用display:none，而不是visibility: hidden。 - immayankmodi
7
@MMTac 这不起作用，因为 display 不是可动画化的CSS属性之一。请参见从“display：block”到“display：none”进行动画处理。 - peterflynn
129
你可以使用过渡效果代替：
.successfully-saved.hide-opacity{
    opacity: 0;
}

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

    transition: opacity 3s ease-in-out;
    opacity: 1;
}
22
现如今不再需要浏览器前缀，只需要使用普通的...transition: opacity 3s ease-in-out; - danday74
19

由于 display 不是可动画化的 CSS 属性，因此无法使用 display:none 来进行淡出动画。可以通过纯 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;
}
4
请查看高性能动画。您应该避免使用会触发重新布局的CSS属性，例如width和height都是敏感的。 - Penny Liu
8
这是你提出问题的工作代码。
享受编码吧....
<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>
4
请提供您的解决方案说明：它是如何工作的？为什么它与已发布的其他解决方案不同？ - lifeisfoo
@lifeisfoo，我尝试了以上所有解决方案，但这是最简单和最容易的方法，还有一件更重要的事情是文本将在几秒钟后自动淡出（10）。因此无需任何点击。 - Vishal Biradar
4

你忘记给 .dummy-wrap 类加上一个 position 属性，而 top/left/bottom/right 值不适用于静态定位元素（默认值）。

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

谢谢，但是过渡后我该如何完全隐藏它？ - user2246087
有几种方法-您可以增加“top”值，以便它移动到视口之外，或者您可以在动画中使用不透明度，以便它像您所希望的那样淡出.. - Adrift
1
好的，我明白了，但还有一个问题，为什么隐藏的 div 在淡出后又出现了？ - user2246087
3
.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;
}

这里有演示。

0

这可能会有所帮助：

<!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>
2
虽然这段代码可能回答了问题，但提供有关它如何以及/或为什么解决问题的附加上下文将改善答案的长期价值。 - blazej
0

在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>
0
你可以通过使用绝对定位从页面中移除元素；
然后：
transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;

然后当您想要元素出现时，请使用此类：

opacity: 1;
transform: translateX(0px);

这里的逻辑是：Transform -> 立即将元素移除/放置到视图中；而不透明度则负责淡入/淡出效果

我们还使用了transition-delay来稍微延迟，使其更好一些

注意：如果您不喜欢TranslateX，可以将其替换为scale(0); scale(1) -> 以使元素立即出现和消失

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接