html – Como fazer com que a imagem vá surgindo aos poucos ao abrir o site? CSS TRANSIÇÃO DE IMAGEM

boa tarde! Tudo bem?

Gostaria que quando a pessoa entrasse no site, a imagem surgisse suavemente. Estou tentando com opacity e visibility, mas não está dando certo.

Código CSS abaixo:

header {
   width: 1000px;
   height: auto;
   margin: 0px auto;
}

header img {
   display: block;
   margin-left: auto;
   margin-right: auto;
   visibility: hidden;
}

img {
   visibility: visible;
   transition: 2s;
}

Poderiam ajudar a como fazer ou alguma sugestão?