html div淡出,CSS-CSS3过渡-淡出

CSS-CSS3过渡-淡出

我正在尝试在纯CSS中实现“淡出”效果。 这是小提琴。 我确实在网上研究了几种解决方案，但是，在在线阅读文档后，我试图弄清楚为什么幻灯片动画不起作用。 有指针吗？

这是HTML

Saved

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;

}

}

6个解决方案

126 votes

这是执行此操作的另一种方法。

淡入效果

.visible {

visibility: visible;

opacity: 1;

transition: opacity 2s linear;

}

淡出效果

.hidden {

visibility: hidden;

opacity: 0;

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

}

UPDATE 2:我发现了更多最新的CSS3过渡教程：fadeIn和fadeOut之类的效果，用于隐藏显示元素和工具提示。示例：此处使用带有示例代码的CSS3 Transition显示隐藏提示或帮助文本。

UPDATE 2:(@ big-money请求添加详细信息)

在显示元素时(通过切换到visible类)，我们希望能看到的可见性：visible可以立即生效，因此可以仅转换opacity属性。 并且当隐藏元素时(通过切换到隐藏类)，我们希望延迟visible：hidden声明，以便我们可以首先看到淡出过渡。 为此，我们声明了可见性属性的过渡，持续时间为0秒，并有一个延迟。 您可以在此处查看详细的文章。

我知道我为时已晚，但是发布此答案以节省其他人的时间。 希望对您有帮助！！

Mayank Modi answered 2019-09-29T04:18:57Z

69 votes

您可以改用转换：

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

}

karthikr answered 2019-09-29T04:17:52Z

5 votes

由于display不是可设置动画的CSS属性之一；一种显示方式：不使用纯css3动画替换fadingOut动画，只需在最后一帧设置width：0和height：0，然后使用animation-fill-mode：转发以保持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;

}

roy wong answered 2019-09-29T04:19:22Z

3 votes

您忘记为.dummy-wrap类添加position属性，并且top / left / bottom / right值不适用于静态定位的元素(默认设置)

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

Adrift answered 2019-09-29T04:19:52Z

3 votes

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

}

演示在这里。

answered 2019-09-29T04:20:16Z

2 votes

这是您的问题的工作代码。

享受编码...

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

}

Vishal Biradar answered 2019-09-29T04:20:46Z