Плавный показ и плавное скрытие картинки.
Всем привет. Подскажите как грамотно сделать плавное скрытие картинки 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);
для скрытия картинки, но там скрытие происходит мгновенно, а не плано. Всем спасибо. |
Цитата:
Или придется делать так как будто ее и не было? |
Cделать так как будто ее и не было.
|
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>
|
РОНИ, огромное спасибо за быстрый ответ. Всё работает. Бай Бог Вам долгих лет. Как бы это же реализовать с помощью CSS ?
|
Цитата:
Можно указать в одной анимации больше кадров и действий в них... Но есть ограничение - не все свойства анимируются. К таким относится свойство display. :-? |
Цитата:
Картинка появляется... Потом пауза в 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' />
|
Как вариант "убирать" меняя размеры в ноль...
<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>
|
ksa, большое спасибо за участие в ответе на мой вопрос. Сейчас буду пробовать ваши варианты. Мне не понятно, для чего в ответе у рони установлен JS, вроде бы и без него всё работает. Прошу строго не судить за мои вопросы, знаний у меня практически нет. Всем ещё раз огромное спасибо.
|
Цитата:
строки 39 и 32 пост #4 |
| Часовой пояс GMT +3, время: 10:42. |