CSS3过渡-淡出效果

s4chpxco 于 2022-12-24 发布在 CSS3

关注(0)|答案(8)|浏览(275)

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

css

来源：https://stackoverflow.com/questions/15907079/css3-transition-fade-out-effect

8条答案

按热度按时间

ippsafx71#

下面是另一种方法来做同样的事情。

淡入效果

.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要求的详细信息）
显示元素时（通过切换到visible类），我们希望visibility:visible立即生效，所以只转换opacity属性是可以的。（通过切换到hidden类），我们希望延迟visibility:hidden声明，以便能够首先看到淡出过渡。我们通过在visibility属性上声明过渡来实现此目的。持续时间为0 s，有延迟。您可以查看详细文章here。
我知道我太晚了回答，但张贴这个答案，以保存别人的时间。

赞(0）回复(0）举报 2022-12-24

knsnq2tg2#

您可以改用过渡：

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

赞(0）回复(0）举报 2022-12-24

sauutmhj3#

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

赞(0）回复(0）举报 2022-12-24

3hvapo4f4#

这是您的问题的工作代码。
享受编码....

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

赞(0）回复(0）举报 2022-12-24

b91juud35#

您忘记向.dummy-wrap类添加一个position属性，top/left/bottom/right值不适用于静态定位的元素（默认值）
http://jsfiddle.net/dYBD2/2/

赞(0）回复(0）举报 2022-12-24

but5z9lq6#

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

赞(0）回复(0）举报 2022-12-24

pkmbmrz77#

这可能有助于：

<!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）回复(0）举报 2022-12-24

fhg3lkii8#

在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）回复(0）举报 2022-12-24

我来回答

CSS3过渡-淡出效果

8条答案

相关问题

热门标签

最新问答