There are 2 blocks <div class="hide_block1"></div> it is open by default and <div class="hide_block2"></div> is hidden by default, how to make it appear in 3 seconds?

  .hide_block1 { background: green; width: 200px; height: 120px; } .hide_block2 { display: none; background: red; width: 200px; height: 120px; transition: 3s; } 
 <div class="hide_block1"></div> <div class="hide_block2"></div>

2 answers 2

Option using css animation

Browser Support

 .hide_block1 { background: green; width: 200px; height: 120px; } .hide_block2 { overflow: hidden; background: red; width: 200px; height: 0px; animation: showDiv 3s forwards; } @keyframes showDiv { 0%, 99% { height: 0px; } 100% { height: 120px; } } 
 <div class="hide_block1"></div> <div class="hide_block2"></div>

Option 2

 .hide_block1 { background: green; width: 200px; height: 120px; } .hide_block2 { max-height: 0; overflow: hidden; background: red; width: 200px; animation: showDiv 3s forwards; } @keyframes showDiv { 0%, 99% { max-height: 0; } 100% { max-height: 999px; } } 
 <div class="hide_block1"></div> <div class="hide_block2">Есть 2 блока по умолчанию скрытый, как сделать так, чтобы он появился через 3 секунды? Есть 2 блока по умолчанию скрытый, как сделать так, чтобы он появился через 3 секунды? Есть 2 блока по умолчанию скрытый, как сделать так, чтобы он появился через 3 секунды? Есть 2 блока по умолчанию скрытый, как сделать так, чтобы он появился через 3 секунды? </div>

  • this is if the height is exactly known - Grundy
  • added version with unknown height - soledar10
  • in my opinion without js this is something that doesn’t look like that - user33274

You can use JavaScript setTimeout , in order to execute the code with a delay (over time). This method executes the code (or function) specified in the first argument, asynchronously, with a delay of delay milliseconds (in our case delay = 3000 миллисекунд = 3 секунды ). setTimeout executes the code only once:

 setTimeout(function() { document.getElementById('hideBlock').style.display = 'block'; }, 3000); 
 .hide_block1 { background: green; width: 200px; height: 120px; } .hide_block2 { display: none; background: red; width: 200px; height: 120px; transition: 3s; } 
 <div class="hide_block1"></div> <div class="hide_block2" id='hideBlock'></div>