How to do a fade in on page load?

Question

How to do a fade in on page load?

Navigation

#1 by (2 votes)

1

I'm trying to make a fade-in effect as soon as my page is opened using only CSS, would I have some way to do that? Are the browser enabled?

I did a search and what I found I'm leaving here to better illustrate the question.

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 imagem

asked by anonymous 12.07.2017 / 23:37

1 answer

Infinite Menu with recursive function Save values temporarily in text fields (inputs)

score 2 · Accepted Answer

Create a .css file in your project folder and add this code. I like saving as effectfade.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 */
}

This will add the call to the effectfade file on the page where you want to apply this effect.

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

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

body{
    animation: fadein 1s;
}

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