.msg {
position: absolute;
background: #000000c7;
max-width: 500px;
left: 15px;
font-size: 16px;
color: #fff;
padding: 10px;
border-radius: 5px;
filter: drop-shadow(0 0 3px rgb(0 0 0 / 80%));
top: 10px;
font-size: 15px;
z-index: 51000;
opacity: 1;
animation: identifier 4s ease forwards;
animation-delay: 2s;
}
.msg:hover {
animation-play-state: paused
}
@keyframes identifier {
1% {
opacity: 1
}
99.99% {
opacity: 0;
pointer-events: auto
}
100% {
pointer-events: none
}
}
<div class='msg'>Текст</div>
Не удается настроить анимацию, как сделать чтобы появлялась медленно, затем держалась секунды 3 и исчезала. Но исчезала в том случаи, если нет курсора над сообщением.