Change opacity of image in CSS

Question

How do I animated the image's opacity from 0.5 to 1? I am making a splash screen and I want my website to change when the image's opacity reaches 1. This is my code:

 .preload{ width: 100%; height: 100%; background: black; position: fixed; top: 0; left: 0; } .logo { display: block; width: 500px; height: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; opacity: 0.5; }

 <div class = "preload" id="preload"> <div class ="logo"> <img src = "https://www.gstatic.com/webp/gallery/5.sm.jpg" class = "logo"> </div> </div>

Answer 1

You can use CSS Animation

.preload{
    width: 100%;
    height: 100%;
    background: black;
    position: fixed;
    top: 0;
    left: 0;}
.logo {
    display: block;
    width: 500px;
    height: 300px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    opacity: 0.5;
    animation: fadeIn 0.5s forwards;
}

@keyframes fadeIn {
    to {
        opacity:1;
    }
}

https://www.w3schools.com/css/css3_animations.asp

Answer 2

You can use CSS animation properties. Try this:

 .preload{ width: 100%; height: 100%; background: black; position: fixed; top: 0; left: 0; } .logo { display: block; width: 500px; height: 300px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; animation: example 3s linear infinite; } @keyframes example { 0% {opacity: 0.0;} 25% {opacity: 0.25;} 50% {opacity: 0.50;} 75% {opacity: 0.75;} 100% {opacity: 1;} }

 <div class = "preload" id="preload"> <div class ="logo"> <img src = "https://www.gstatic.com/webp/gallery/5.sm.jpg" class = "logo"> </div> </div>