Проблема отображения анимации

@mikitos813 · Регистрация: 09.12.2018

Студворк — интернет-сервис помощи студентам

У меня проблема. Когда я нажимаю на кнопку, у меня плавная часть экрана должна плавно переходить в затемненный цвет, так и происходит, но после выполнения анимации темный цвет пропадает. Как это исправить?
Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="ru">
<head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>psije</title>
    </head>
    <body>
        <header class="myHeader">
            <div class="menuHelp">
                <input onclick="menufuncClick()" class = "menuBtn" type="button" value="|||">
            </div>
            <div class="menuSector" id="idMenuSector">
                <div class="menuWalper" id="idMenuWalper"><input id="idIntoMenuBtn" class="hideIMBtn" type="button" value="|||"></div>
                
            </div>
            
        </header>
        <main>
            <div class="content">
                Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum
            </div>
        <main>      
        <footer>
            
        </footer>
    </body>
    <script src="script.js"></script>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
*{
    margin:0;
    padding:0;
}
.myHeader{
    width:100%;
    max-height:54px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.menuBtn{
    background-color: rgba(0, 0, 0, 0);
    border:none;
    outline:none;
    font-size:36px;
    border-radius:100%;
    padding-bottom:6.2px;
    padding-left:10px;
    padding-right:10px;
    
    -webkit-transform:rotate(90deg);    
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
    
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -ms-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}
.menuHelp{
    text-align:right;
    margin-right:10px;
    overflow:hidden;
}
.menuBtn:hover{
    cursor:pointer;
    color:skyblue;
    
    -webkit-transform:rotate(270deg);   
    -moz-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    transform:rotate(270deg);
}
 
.menuSector{
    display:flex;
    justify-content:flex-end;   
}
.menuWalper{
    background-color:#475e75;
    top:0;
    padding:0;
    position:fixed;
    
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -ms-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}
.menuWalperEdit{
    padding-bottom:200%;
    padding-left:240px;
}
.menuWalperEdit::before{
    animation: aaa 0.8s;
    content: "";
    position:absolute;
    width: 1000%;
    height: 100%;
    background:rgba(0, 0, 0, 0);
    left: -1000%;
}
@keyframes aaa {
    100%{
        background-color: rgba(0, 0, 0, 0.3);
    }
}
.hideIMBtn
{
    display:none;
}
.intoMenuBtn
{
    background-color: rgba(0, 0, 0, 0);
    border:none;
    outline:none;
    font-size:36px;
    border-radius:100%;
    padding-bottom:6.2px;
    padding-left:10px;
    padding-right:10px;
    margin-right:10px;
    
    -webkit-transform:rotate(90deg);    
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    transform:rotate(90deg);
    
    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -ms-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}
footer{
    background-color:black;
    width:100%;
    height:100px;
    position:fixed;
}
.content{
    padding:5px;
}

JavaScript
1
2
3
4
5
6
7
8
9
var MenuWalp = document.getElementById("idMenuWalper");
var MenuSec = document.getElementById("idMenuSector");
var IntoMenBtn = document.getElementById("idIntoMenuBtn");
function menufuncClick(){
    MenuWalp.classList.add("menuWalperEdit");
    MenuSec.classList.add("menuSectorEdit");
    IntoMenBtn.classList.add("intoMenuBtn");
    IntoMenBtn.classList.remove("hideIMBtn");
}

@toothcomp · 15.01.2019, 09:44

А что вы вот этим делаете

CSS
1
2
3
4
@keyframes aaa {
    100%{
        background-color: rgba(0, 0, 0, 0.3);
    }

У вас затемнение идет в момент нажатия на кнопку.
Затемняйте body добавлением класса

Посмотрите тут https://codepen.io/kjbrum/pen/VQjGvJ может что то найдете для себя

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .