Javascript-форум - Как сделать плавное проявление картинки?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Как сделать плавное проявление картинки? (https://javascript.ru/forum/dom-window/75908-kak-sdelat-plavnoe-proyavlenie-kartinki.html)

Как сделать плавное проявление картинки?

Здравствуйте.

Есть картинка:

<img id="result_pic_six" src="img/hulk_main.jpg" width=100% alt="A">

Картинка появляется если набрать определенное кол-во очков.
Но проявление резкое и смотрится не очень.

Пробовал через opacity и transition но не работает.

Скорее всего из-за этого куска кода.

var hero_six = document.getElementById('result_pic_six');
hero_six.style.display="block";

Код:

#result_pic_six

    display: none

Как я это понимаю - из-за того что стоит display="block" - картинка появляется сразу же, без всяких задержек.

При этом удалить их нельзя, они необходимы, чтобы код работал.

Как решить проблему?

notOldFagFromRussia,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #result_pic_six {
      display: none;
      opacity: 0;
      transition: 2s;
   }
  </style>
</head>

<body>
<img id="result_pic_six" src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width=100% alt="A">
 <script>

var hero_six = document.getElementById('result_pic_six');
hero_six.style.display="block";
window.setTimeout(function() {
hero_six.style.opacity="1";

},0)

 </script>

</body>
</html>