html div淡出,CSS3过渡 – 淡出效果

我试图在纯css中实现“淡出”效果.这是

fiddle

我确实在线查看了几个解决方案.但是在阅读了

documentation online之后

我试图弄清楚为什么幻灯片动画不起作用.有什么指针吗？

这是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;

}

}