从右到左 div 并在 5 秒后使用 CSS 隐藏

Question

我从右到左显示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>

Answer 1

考虑第二个动画。您还可以通过删除大量不需要的属性来简化代码

.successAlet {
background-color: red;
color: #fff;
position: fixed;
top: 0;
width: 400px;
right: 0;
z-index: 1001;
animation-name: fadeInRight,hide;
animation-duration: 1s;
animation-delay: 0s,3s;
animation-fill-mode: both;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
@keyframes hide {
100% {
opacity: 0;
}
}

<div class="successAlet">
<h2>Animate and then autohide in 5 sec</h2>
</div>

Answer 2

表示平滑隐藏

@keyframes hide {
100% {
opacity: 1;
width: 0;
}
}