純粋な Javascript を使用して画像置換のためのトランジション効果を実装する

Question

私が作成した Web サイトには多数のアコーディオンがあり、それぞれの上部に画像があります。アコーディオンを開くと中に説明があり、画像が切り替わります。アコーディオンを閉じると、画像は最初の画像に戻ります。問題は、この画像の変更には、フェード効果を伴う滑らかな遷移を持たせたいのですが、現在は単なる突然の変更であるということです。どうすればいいですか？

アコーディオンボタンの ID が「button」で、最初の画像 (2 番目の画像に変更されます) を含むラベルの ID が「firstimage」だとします。

これは JavaScript コードです:

リーリー

これは CSS で編集する必要があるのでしょうか? CSS で最初の画像にトランジションを追加しようとしました (トランジション: すべての 360 ミリ秒でイーズインとイーズアウト) が機能しません。