How to make a block to appear on the page after 3 seconds? CSS

Question

I am working on developing a website using Python's Django framework. At the frontend part, I am trying to make a division block to appear 3 seconds after you have accessed the page.

I'll share with you my code:

.computerScienceContent{
    text-align: center;
    display: block;
    position: relative;
    margin-top: 10px;
    margin-bottom: 50px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    padding-left: 20px;
    animation-delay: 2s;
    animation: 1s linear 1s slideInLeft;
}

The above cod is used for displaying the block.

This code is used to display it from left to right.

  @keyframes slideInLeft {
            0% {
              transform: translateX(-100%);
            }
            100% {
              transform: translateX(0);
            }
          }

This is the django code from the html that I am trying to displaying with delay.

  <div class="computerScienceContent">
        {% for cat in category %}
            <div class="csDivContent" id="slide">
                <div id="slide">
                    <h4>{{ cat.name }}</h4>
                    <img src="{{ cat.img.url }}" alt="image" class="img">
                </div>
            </div>
        {% endfor %}
        </div>

Basically, I want the block to be displayed 3 seconds after I access the website, one entry at a time, from left to right (there are only 4 entries). If anybody can help, I will be very happy! Thank you so much for your time !

Later edit: I provided a code sample: https://www.w3schools.com/code/tryit.asp?filename=GND7OAP8A72U

Does this answer your question? [How can I use delay() with show() and hide() in Jquery](https://stackoverflow.com/questions/4508644/how-can-i-use-delay-with-show-and-hide-in-jquery) You mentioned in comment you are trying with jquery... — ikiK, Feb 05 '21 at 17:30
Could you use a snippet in your question to provide us with a runnable example, so we can see what's happening instead? — SpoonMeiser, Feb 05 '21 at 17:32
I do not know how to use a snippet. I am new here and in programming as well..... i'll try to find a way.... @ikiK it isn't working. I tried and still.. — geekt, Feb 05 '21 at 17:37

score 2 · Accepted Answer · answered Feb 05 '21 at 17:46

2

There are multiple ways. the easiest is with javascript:

<style>
.computerScienceContent {
display: none;
}
</style>

<script>
setTimeout( ()=>{
    document.querySelesctor('.computerScienceContent').style.display = 'block'
    }, 3000)
</script>

answered Feb 05 '21 at 17:46

Lukas

36
2

score 1 · Answer 2 · edited Feb 05 '21 at 17:41

You can't animate the display property BUT you can hide your block in various ways, for example, just make your block height and width 0 from 0 to 99% then auto at 100%. Here is an example:

.block {
  animation: ani 3s linear;
}

@keyframes ani {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
  }
  99% {
    height: 0;
    width: 0;
    opacity: 0;
  }
  100% {
    height: auto;
    width: auto;
    opacity: 1;
  }
}

<div class="block">
  <h1>Header of the article</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum tenetur possimus voluptas culpa pariatur ipsum minima vel atque ullam architecto optio blanditiis, ut laboriosam asperiores numquam assumenda nobis vitae eligendi.</p>
</div>

score 1 · Answer 3 · answered Feb 05 '21 at 17:51

$('.computerScienceContent').delay(2000).toggle("slide:right");

.computerScienceContent {
  text-align: center;
  display: none;
  position: relative;
  margin-top: 10px;
  margin-bottom: 50px;
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  padding-left: 20px;
  animation: 1s linear 1s slideInLeft;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="computerScienceContent">
  {% for cat in category %}
  <div class="csDivContent" id="slide">
    <div id="slide">
      <h4>{{ cat.name }}</h4>
      <img src="{{ cat.img.url }}" alt="image" class="img">
    </div>
  </div>
  {% endfor %}
</div>

How to make a block to appear on the page after 3 seconds? CSS

3 Answers3