CSS3转换 – 淡出效果

我正在尝试在纯CSS中实现“淡出”效果。 我在网上查了一些解决scheme,这里是小提琴 。 不过在线阅读文档之后

我想弄清楚为什么幻灯片animation不起作用。 任何指针?

这是HTML

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

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

您可以使用转换:

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

这是另一种做同样的方法。

淡入效果

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

淡出效果

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

你可以在这里看到详细的文章。

UPDATE:我发现更多的最新教程CSS3过渡:淡入淡出和类似的效果,以隐藏显示元素和工具提示示例:显示隐藏提示或帮助文本使用示例代码使用CSS3 Transition 。

我知道我为时已晚,但发布这个答案以节省时间。 希望它可以帮助你!

您忘记将位置属性添加到.dummy-wrap类,并且顶部/左侧/底部/右侧值不适用于静态定位的元素(默认值)

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

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

在这里演示。

只是供参考,有一个多用途的库称为animate.css您可能会感兴趣的人,它有一大堆纯CSS3animation。 你可以拿起并使用它或学习下面的技巧。

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

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