CSS3 过渡 - 淡出效果

问题描述 投票：0回答：9

我正在尝试用纯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>

css css-transitions
9个回答
260
投票

还有另一种方法可以实现同样的效果。

淡入淡出效果

.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和fadeOut类似效果来隐藏显示元素和工具提示示例：使用CSS3 Transition显示隐藏提示或帮助文本此处带有示例代码。

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

显示元素时（通过切换到可见类），我们希望 

visibility:visible
立即启动，因此只转换不透明度属性就可以了。当隐藏元素时（通过切换到隐藏类），我们希望延迟 
visibility:hidden
声明，以便我们可以首先看到淡出过渡。我们通过声明可见性属性的转换来实现这一点，持续时间为 0 秒并有延迟。您可以在这里查看详细文章。

我知道我来不及回答，但发布此答案是为了节省其他人的时间。

130
投票

您可以使用过渡：

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

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

    transition: opacity 3s ease-in-out;
    opacity: 1;
}
19
投票

因为 

display
不是可动画化的 CSS 属性之一。 一个 
display:none
fadeOut 动画替换为纯 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;
}
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
投票

您忘记向 

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

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

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;
}

演示在这里。

1
投票

您可以通过绝对位置从页面中删除元素；

然后：

transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;

然后当你想要元素出现时，使用这个类：

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

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

我们还通过过渡延迟添加了轻微的延迟，以使其更好一点

注意：如果你不喜欢TranslateX，你可以用scale(0)替换它； scale(1) -> 让元素立即出现和消失

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>
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.