logo in div & height of div disappear after 10sec?

[tim cross]

Is there a way to hide a div and logo within it?

I have a logo at the top of the screen, but after 10 seconds I want it to disappear, and the text below it move up to replace it.

I have found how to hide the logo, but I can't get the box to go to 0px and disappear!

anyway of doing this please?

[WolfShade]

Are you using jQuery?  Or plain vanilla JavaScript?

V/r,

^ _ ^

[WolfShade]

I did some looking around.  Use the following instructions, but keep the "transition-timing-function" out of it.

https://davidwalsh.name/css-slide

Then use JavaScript to set the timer (setTimeout()) for the transition trigger.

HTH,

^ _ ^

(Or, keep the transition-timing-function in and alter the numbers to allow a ten second transition and keep it pure CSS with no JS.)

Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

[pziecina]

WolfShade  wrote

Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

Don't throw out a good idea, try it with the addition of css keyframe animations -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

[WolfShade]

Did not realize that there was an animation-delay.  Cool.

V/r,

^ _ ^

[osgood_]

pziecina  wrote

WolfShade   wrote

Ignore that.  I had no idea what the numbers meant.  I do, now.  They are NOT for timing.    Keep the JS in.

Don't throw out a good idea, try it with the addition of css keyframe animations -

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

I think the issue with using just css/keyframes alone is how to set the container to display none. You can set the opacity in a keyframe but how do you set the keyframe 'from' display: block; 'to': display: none; ????

[pziecina]

The ideal method would be to fade out the logo in say the initial 5 seconds, then reduce the size of the block element, before setting the final display to none.

Dispay is an animatable property see reference list of animatable properties in -

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

[osgood_]

pziecina  wrote

The ideal method would be to fade out the logo in say the initial 5 seconds, then reduce the size of the block element, before setting the final display to none.

Dispay is an animatable property see reference list of animatable properties in -

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Got a simple example as I can't make it work? According to what you are suggesting the 'display' from block to none should work but it doesn't.

p {
  animation-duration: 10s;
  animation-name: hide;
}

@keyframes hide {
  0% {


opacity: 1;
  }

50% {

opacity: 0;

}

100% {


height: 0;

display: none;
  }
}

[pziecina]

You have to give the element a class, apply the reduction in size, (and opacity for any content) then finally set the display to none, on the class.

[pziecina]

osgood_  wrote

pziecina   wrote

The ideal method would be to fade out the logo in say the initial 5 seconds, then reduce the size of the block element, before setting the final display to none.

Dispay is an animatable property see reference list of animatable properties in -

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Got a simple example as I can't make it work? According to what you are suggesting the 'display' from block to none should work but it doesn't.

I've only just thought, (must be my age), but I've never checked if the display property actually goes to none. With such animations I always reduce the size and opacity gradually, so that the user is not presented with something that just disapears 'instantly', as doing so would be very bad animation practice.

[osgood_]

pziecina  wrote

I've only just thought, (must be my age), but I've never checked if the display property actually goes to none. With such animations I always reduce the size and opacity gradually, so that the user is not presented with something that just disapears 'instantly', as doing so would be very bad animation practice.

In the OPs case I dont think we are talking about a subtle animation. Css cant really do anything in terms of waiting for 10 seconds  and then performing something - it just does what is does over a period of 'animation' time - thats a big fail in terms of what css alone can do...is there a keyframes animation-delay property?

[pziecina]

if you follow the link in Wolfshads reply, (or the one below) css animations and keyframes has an animation delay propery -

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

[osgood_]

pziecina  wrote

if you follow the link in Wolfshads reply, (or the one below) css animations and keyframes has an animation delay propery -

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

I found that out but it still doesnt work as you have to set the height of the animated container (which you might not know) and then it doesnt set the height of the content within to 0, see example below

I'm sure there is way of doing it but as I havent explored using keyfarmes that much especially for showing and hiding elements I cant get the combo right.

Its a big fail that css animations cant set a container to display none.

<!DOCTYPE html>

<html>

<head>

<style>

.logo {

background: red;

animation: hide 3s;

animation-fill-mode: forwards;

animation-delay: 3s;

}

@keyframes hide {

0% {

opacity: 1;

}

50% {

opacity: 0;

}

75% {

height: 100px;

}

100% {

height: 0px;

}

}

</style>

</head>

<body>

<h1 class="logo">Hello World</h1>

<div class="text">Some text here</div>

</body>

</html>

[osgood_]

I guess this is about as good as it gets - using overflow hidden on the container gets rid of the content when set to height 0;

<!DOCTYPE html>

<html>

<head>

<style>

.logo {

background: red;

animation: hide 3s;

animation-fill-mode: forwards;

animation-delay: 3s;

margin: 0;

padding: 0;

}

@keyframes hide {

0% {

opacity: 1;

}

50% {

opacity: 0;

}

100% {

height: 0px;

overflow: hidden;

}

}

</style>

</head>

<body>

<h1 class="logo">Hello World</h1>

<div class="text">Some text here</div>

</body>

</html>

[pziecina]

The solution is one of those css properties that you cannot use reliably yet, (found by the Edge team) but if you set the values in css variables, (from - to) it will work. The big problem at the moment is that Safari/iOS-Safari does not support the use of css variables inside an animation, (have not tried latest versions though, too expensive to upgrade , us pensioners don't have £1000 just for a phone).

[osgood_]

pziecina  wrote

The big problem at the moment is that Safari/iOS-Safari does not support the use of css variables inside an animation, (have not tried latest versions though, too expensive to upgrade , us pensioners don't have £1000 just for a phone).

I refuse to buy one. I'm not getting mugged off.

[osgood_]

pziecina  wrote

The solution is one of those css properties that you cannot use reliably yet, (found by the Edge team) but if you set the values in css variables, (from - to) it will work.

I dont know after I introduced overflow: hidden; it seems to work quite smoothly but as most websites are linked to jquery I would probably still use that as its already available and no keyframe nonsense and prefixes are needed.

[pziecina]

osgood_  wrote

I dont know after I introduced overflow: hidden; it seems to work quite smoothly but as most websites are linked to jquery I would probably still use that as its already available and no keyframe nonsense and prefixes are needed.

That's the problem, even though most things can be done just with css now, designers and developers tend to use jQuery or js for everything that requires animations. The only usefull tools for css animations is Googles css designer, and that has not been updated for years, (I think it still only produces the webkit prefixed code) and MS's VS Pro comes with a useful tool also, but that is aimed at app creation.

[osgood_]

pziecina  wrote

That's the problem, even though most things can be done just with css now, designers and developers tend to use jQuery or js for everything that requires animations.

Well I guess there is a reason IF and only IF jquery is already linked to the website as it mostly is because css just cant do a lot of what jQuery can do or pure/vanilla javascript its just far easier, as Nancys line of code shows, to add it:

$('.logo').delay(10000).slideUp();

[ALsp]

pziecina  wrote

I've only just thought, (must be my age), but I've never checked if the display property actually goes to none. With such animations I always reduce the size and opacity gradually, so that the user is not presented with something that just disapears 'instantly', as doing so would be very bad animation practice.

There are several things at play with that. Firstly, display properties cannot be animated. They are either on or off. The other issue is that the browser is programmed to create phantom elements - that is, when an element is being animated, it is actually out of the document flow, but not in the traditional sense. So, introducing display none in a keyframe animation will indeed hide it, but the space it occupied will not be relinquished. The process of doing what Tim wants to do, however, is really easy using keyframes and 2 animations. See my example posted in response to the original post.

[osgood_]

I dont  think you need 2 animations? Post 15 does it using just the one, no?

[ALsp]

2 animations are not required, but I did it for 2 reasons...

1. To enable the animation to "animate" or smoothly slide

2. To provide a solution for separately animating a logo DIV that might contain both an image and text.

Animating the image is actually harder (due to Chrome/Webkit lingering anomalies), though I think the CSS is still very simple and can provide a good learning experience for the user.

[osgood_]

Assuming your logo is in a <div> with the class of 'logo' or has a class of 'logo' itself use the setTimeout javascript function to set the logo to display none after 10 seconds, example below. You're using jQuery so you can just add it to your exsiting jQuery.

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Set Time Out</title>

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

setTimeout(function(){

$('.logo').css('display', 'none');

}, 10000);

});

</script>

<style>

header {

width: 70%;

margin: 0 auto;

background-color: #f2f2f2;

}

</style>

</head>

<body>

<header>

<div class="logo">Logo goes here</div>

<div class="text">Text goes here</div>

</header>

</body>

</html>

[Nancy OShea]

Since I use jQuery for most projects anyway...

Bootstrap with SVG Intro

<body>

<div id="intro">

YOUR LOGO HERE....

</div>

<script>

//show/hide intro
$(window).ready(function() {
  $('#intro').fadeIn('fast', function() {
  //wait 5 seconds and fade out
$(this).delay(5000).fadeOut(2000);
  });
});
</script>

[Nancy OShea]

jQuery SlideUp.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery SlideUp Demo</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<div id="intro">

<img src="https://dummyimage.com/200x200" alt="logo">

<em>This will slide up in 10 seconds. </em>

</div>

<hr>

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam a natus ea error, sunt deserunt est magnam quo, aut voluptatem commodi doloremque dolore, sint nulla culpa dolor eveniet velit. Aliquam!</p>

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<script>

$(window).ready(function(){$("#intro").fadeIn("fast",function()

//delay 10 seconds

{$(this).delay(10000).slideUp(1e3)})})

</script>

</body>

</html>