pomalu objevující se obrázek

Můžete mi prosím napsat ukázkový skript toho, jak se zničeho nic pomalu objeví obrázek a pak zase pomalu zmizne?

Něco jako je na stránce www.gaiaonline.com ten objevující se a mizící avatar (Featured Avatar).

Třeba vám pomůže stránka https://www.w3schools.com/howto/default.asp

Tohoto lze snadno dosahnout pomoci CSS:

img {
animation-name: prechod;
animation-duration: 10s;
}

@keyframes prechod {
0% {opacity: 0;}
25% {opacity: 1;}
75% {opacity: 1;}
100% {opacity: 0;}
}

V tomto pripade by animace trvala 10 sekund, 2.5 s by se obrazek objevoval, pak by 5 s vydrzel zobrazeny, a pak zase 2.5 s mizel. Je mozne upravit procenta (z delky animace) a dle libosti jim priradit hodnoty.