Как анимировать document.getElementById('').src?

Question

[Владимир Суворов]

Имеется слайдер. Суть его работы при клике на кнопку BTN в тег IMG "используя метод document.getElementById('').src" подставляет нужное изображения. Вопрос заключается в том, что можно ли анимировать появление изображение, при переходе на другое изображения( используя transition - css или же JQuery, если имеется источник буду очень рад.
Ссылка на мини слайд https://codepen.io/my_kachanov/pen/WpWZgW

<code lang="css">
img{
  width: 600px;
  height:400px;
}
</code>
<code lang="javascript">
function slider(){
  document.getElementById('slide').src = "http://main.polytravel.com.ua/images/stories/turizm/Taity/2.jpg";
};
</code>
<code lang="html">
	<button class="" onclick="slider()">Click</button>
	<img src="http://www.yachting.su/foto/magazine/3188/3432/3504/23373.jpg" id="slide"/>
</code>

Answer 1

[Dartess]

Нельзя.
Можно создать новое изображение поверх и анимировать его opacity. Будет эффект проявления.

Answer 2

[Сергей Кардашов]

Если ты хочешь сделать свой слайдер, то можешь применить вот этот движок GSAP. По ссылке можно скачать и посмотреть примеры как анимировать