显示弹出窗口一秒钟，一秒钟后它将自动隐藏

Question

显示弹出窗口一秒钟，一秒钟后它将自动隐藏。

CSS有什么办法吗？ 我不想要JavaScript。

Answer 1

您可以使用CSS动画来实现此目的。

.popup {
/* apply 3 second hiding animation after 10 second delay */
animation: hide 3s 10s forwards;
/* fix popup at the center of screen, optional style */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
/* dimming entire screen except popup */
outline: 100vmax solid #ccc;
}
@keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

<div class="popup">
This is popup
</div>