Я показываю div справа налево, и через 5 секунд он будет скрыт. Я попробовал код справа налево, но через 5 секунд он не скрывается.
Я попытался opacity:0
внутри ключевого кадра, но моя анимация не работает.
Не могли бы вы помочь мне в этом? ?
.successAlet {
background-color: red;
color: #fff;
position: fixed;
top: 0;
width: 400px;
right: 0;
z-index: 1001;
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
<div class="successAlet">
<h2>Animate and then autohide in 5 sec</h2>
</div>