我試圖在純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>這是另一種方法。
淡入效果
.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 like效果來隱藏顯示元素和工具提示示例:使用CSS3過渡顯示隱藏提示或幫助文本，這里有示例代碼。
更新2:(根據@big-money的要求增加了細節)
當顯示元素時(通過切換到visible類)，我們希望visibility:visible立即生效，所以只轉換不透明度屬性是可以的。并且在隱藏元素時(通過切換到hidden類)，我們希望延遲visibility:hidden聲明，這樣我們就可以先看到淡出過渡。我們通過在visibility屬性上聲明一個持續時間為0且有延遲的轉換來實現這一點。你可以在這里看到一篇詳細的文章。
我知道我回答太晚了，但是發布這個答案是為了節省別人的時間。
您可以使用轉場來代替:
.successfully-saved.hide-opacity{
opacity: 0;
}
.successfully-saved {
color: #FFFFFF;
text-align: center;
transition: opacity 3s ease-in-out;
opacity: 1;
}因為display不是可設置動畫的CSS屬性之一。 一次顯示:none fadeOut動畫替換為純CSS3動畫，只需在最后一幀設置寬度:0和高度:0，使用animation-fill-mode: forwards保持寬度:0和高度: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;
}這是你問題的工作代碼。 享受編碼....
<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>您忘記了向。dummy-wrap類，并且上/左/下/右值不適用于靜態定位的元素(默認)
http://jsfiddle.net/dYBD2/2/
在這里演示。
這可能有所幫助
<!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>使用CSS中的向前填充模式，使其停留在動畫的最后部分。
我建議用transform:tranlsateY(-20px)；而不是使用css位置，但是如果您堅持使用它，那么設置。虛擬-將位置繞到絕對位置
.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>您可以通過絕對位置從頁面中移除元素；
然后:
transform: translateX(-200vw);
opacity: 0;
transition: opacity 0.2s;
transition-delay: 200ms;然后，當您希望元素出現時，使用此類:
opacity: 1;
transform: translateX(0px);這里邏輯是:轉換->；立即在視圖中移除/放置元素；而不透明度負責淡入/淡出效果
我們還增加了短暫的過渡延遲，讓它稍微好一點
注意:如果不喜歡TranslateX，可以用scale(0)代替；標度(1) ->使元素瞬間出現和消失