Показать сообщение отдельно
  #4 (permalink)  
Старый 03.12.2021, 12:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

BSI,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #rybak {
            grid-row: 1;
            grid-column: 1 / span 8;
            transform: scale(0.8);
            position: relative;
            margin-top: 6em;
            margin-left: -1em;
            opacity: 0;
            transition: 2s;
            animation: show 14s 3s;
            animation-fill-mode: forwards;
            background-color: #FF0000;
            height: 100px;
        }
        @keyframes show {
            0%,
            100% {
                opacity: 0;
            }
            20%,
            90% {
                opacity: 1;
            }
        }
        #rybak.hide {
            display: none;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const elem = document.querySelector("#rybak");
            elem.addEventListener("animationend", function(event) {
                elem.classList.add("hide")
            });
        });
    </script>
</head>
<body>
    <div id="rybak"></div>
</body>
</html>
Ответить с цитированием