Я пытаюсь реализовать эффект "затухания" в чистом css. Вот fiddle Я просмотрел несколько решений в Интернете. Однако после чтения документации онлайн
Я пытаюсь понять, почему анимация слайдов не работает. Любые указатели?
Вот 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;
}
}