How to fade in body gradient

After clicking on the play svg the fade should look like this:

It currently does not: https://jsfiddle.net/w7Lcef04/

As seen in the fiddle I provided.

In the code, how would I fade in the body gradient along with the whole body?

That is all I am trying to do is fade in the body as is shown in the image I provided.

How would I be able to do that in the code?

Fading in the body is what I am trying to implement in the code.

I try this on your page it`s working:

How to create fade-in effect on page load using CSS ? - GeeksforGeeks

it is a nice page…
Hope you like it…

1 Like

Can you show me it working on here?
https://jsfiddle.net/w7Lcef04/

How do I add it to the code?

body {
    animation: fadeInAnimation ease 3s
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
  
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

add animation to the body…

I still can’t get the gradient border background body to fade in.

https://jsfiddle.net/w7Lcef04/

body.bg1{
  animation: fadebody 5s ease 0s forwards;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

I think the background image (linear-gradient) would have to be behind the body to see it fade through the transparent body.

You can try using a pseudo-element on the body and put the background image on it and fade that.

Example
body.bg1::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  height: 100vh;
  width: 100%;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px),
    linear-gradient(90deg, teal 5px, #0000 5px),
    linear-gradient(black 10px, #0000 10px 160px, black 160px),
    linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px),
    linear-gradient(orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px),
    linear-gradient(black 20px, #0000 20px 150px, black 150px),
    linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px),
    linear-gradient(teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px),
    linear-gradient(black 30px, #0000 30px 140px, black 140px),
    linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px),
    linear-gradient(orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px),
    linear-gradient(black 40px, #0000 40px 130px, black 130px),
    linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px),
    linear-gradient(teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px),
    linear-gradient(black 50px, #0000 50px 120px, black 120px),
    linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px),
    linear-gradient(orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px),
    linear-gradient(black 60px, #0000 60px 110px, black 110px),
    linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),
    linear-gradient(teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px),
    linear-gradient(black 70px, #0000 70px 100px, black 100px),
    linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px),
    linear-gradient(orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px),
    linear-gradient(black 80px, #0000 80px 90px, black 90px),
    linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px),
    linear-gradient(teal, teal);
}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.