How do I fade in the page load?

Asked

Viewed 898 times

1

I’m trying to make a fade-in effect so my page is opened using only CSS, would there be any way to do that? The browser is able to do this?

I did some research and what I found I’m leaving here to illustrate the question better.

img {
             opacity: 0;

   -webkit-animation: fadeIn 1s ease-in-out;
      -moz-animation: fadeIn 1s ease-in-out;
        -o-animation: fadeIn 1s ease-in-out;
           animation: fadeIn 1s ease-in-out;

  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
html css image

  • You tried to use what you found??

  • https://codepen.io/JTBennett/pen/GorVRL

  • If you want this to happen when loading the page, you will have to use Javascript. It is one thing to make an Random animation at any time, it is another to do it when the page is loaded. Detail this in your question.

1 answer

2


Create a file .css in your project folder and add this code. I like to save as efeitofade.css

@keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* Padrão */
}
@-moz-keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* Firefox */
}
@-webkit-keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* Webkit */
}
@-ms-keyframes fadein {
from { opacity: 0.3; }
to { opacity: 1; } /* IE */
}​

@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0.3; } /* Padrão */
}
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0.3; } /* Firefox */
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0.3; } /* Webkit */
}
@-ms-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0.3; } /* IE */
}​

Done this add the call to the file effect on the page where you want to apply this effect.

<link rel="stylesheet" href="efeitofade.css">

Great! Now in the css page you add this style to the tag body

body{
    animation: fadein 1s;
}

In that case the animation will last 1s, if you want it to last a different time just change the tag body

  • That’s good, thank you!

Browser other questions tagged html css image

You are not signed in. Login or sign up in order to post.