Форум

BSI · #1 (**permalink**) 03.12.2021, 11:47

Всем привет. Подскажите как грамотно сделать плавное скрытие картинки gif. Как сделать плавный показ картинки мне понятно, в стилях вот этот код

#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 2s 1; 
animation-fill-mode: forwards; 
animation-delay: 3s; 
  } 
@keyframes show{
0%{
opacity:0;
}
100% {
opacity:1;
}
}

а вот как его так же плавно скрыть через, скажем 10 сек., не получается. Навыки в css минимальные. Нашел JS

setTimeout(function(){
	document.getElementById('rybak').style.display = 'none';
}, 1000);

для скрытия картинки, но там скрытие происходит мгновенно, а не плано. Всем спасибо.

ksa · #2 (**permalink**) 03.12.2021, 12:16

Сообщение от BSI

как его так же плавно скрыть через, скажем 10 сек

Место "под картинкой" будет оставаться?
Или придется делать так как будто ее и не было?

BSI · #3 (**permalink**) 03.12.2021, 12:19

Cделать так как будто ее и не было.

рони · #4 (**permalink**) 03.12.2021, 12:38

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>

BSI · #5 (**permalink**) 03.12.2021, 12:58

РОНИ, огромное спасибо за быстрый ответ. Всё работает. Бай Бог Вам долгих лет. Как бы это же реализовать с помощью CSS ?

ksa · #6 (**permalink**) 03.12.2021, 13:14

Сообщение от BSI

Как бы это же реализовать с помощью CSS ?

В ЦСС можно выполнить несколько анимаций... Так же можно указывать задержку перед началом анимации...
Можно указать в одной анимации больше кадров и действий в них...

Но есть ограничение - не все свойства анимируются.
К таким относится свойство display.

ksa · #7 (**permalink**) 03.12.2021, 15:38

Сообщение от ksa

В ЦСС можно выполнить несколько анимаций... Так же можно указывать задержку перед началом анимации...

Вот примерчик...
Картинка появляется... Потом пауза в 5 секунд. Потом скрывается.
Но так "место остается" от нее.

Убирать нужно как показали выше.

<style>
#rybak {
	animation: show 5s ease 1s, hide 2s ease 5s; 
	animation-fill-mode: forwards; 
	opacity:0;
 } 
@keyframes show{
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes hide{
	0%{
		opacity:1;
	}
	100% {
		opacity:0;
	}
}
</style>
<img id='rybak' src='https://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />

ksa · #8 (**permalink**) 03.12.2021, 15:49

Как вариант "убирать" меняя размеры в ноль...

<style>
.container {
	display: inline-block;
	padding: 10px;
	background-color: silver;
}
#rybak {
	animation: show 5s ease 1s, hide 3s ease 5s; 
	animation-fill-mode: forwards; 
	opacity:0;
 } 
@keyframes show{
	0%{
		opacity:0;
	}
	100% {
		opacity:1;
	}
}
@keyframes hide{
	0%{
		opacity:1;
	}
	99% {
		opacity:0;
	}
	100% {
		width:0;
		height:0;
	}
}

</style>
<div class='container'>
	<img id='rybak' src='https://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />
</div>

BSI · #9 (**permalink**) 03.12.2021, 16:31

ksa, большое спасибо за участие в ответе на мой вопрос. Сейчас буду пробовать ваши варианты. Мне не понятно, для чего в ответе у рони установлен JS, вроде бы и без него всё работает. Прошу строго не судить за мои вопросы, знаний у меня практически нет. Всем ещё раз огромное спасибо.

рони · #10 (**permalink**) 03.12.2021, 16:37

Сообщение от BSI

Мне не понятно, д

js устанавливает элементу display: none; без js это не сделать.
строки 39 и 32 пост #4

Форум

Справочник

Discord чат

Курсы javascript