Плавный показ и скрытие картинок и текста конкретно с данным скриптом

const frazas = [
    {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [40, 40],  
    text: "Час сидим<br> клёва нет.",   
    textpos: [70, 68]
    },            
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [40, 80],  
    text: "С клёвом<br> тишина!",   
    textpos: [70, 100]
    },            
    {src: "https://habrastorage.org/webt/pq/ep/mf/pqepmfu6zlmoloz4kwah3vjmn_e.png",  
    imgpos: [40, 180],  
    text: "Клёва нет<br> и не будет!",  
    textpos: [70, 200]
    },            
    {src: "https://habrastorage.org/webt/7e/zs/bh/7ezsbh3mvq1wrlzft96v5tt_j04.png",  
    imgpos: [40, 40],  
    text: "Вот и Андрюха<br> на горизонте!",   
    textpos: [70, 60]
    },            
];
 
const img = document.querySelector('.kartink img');
const txt = document.querySelector('.tekst b');
 
const delay = (t) => new Promise (r => setTimeout(r, 4500));
 
async function cycle () {
    await delay(4500);
    for (let f of frazas) {
       img.src = f.src;
       img.style = `position:absolute;top:${f.imgpos[0]}px; left:${f.imgpos[1]}px;opacity: 1;`
        txt.innerHTML = f.text;
        txt.style = `position: absolute; font-size:13px; opacity: 1; top: ${f.textpos[0]}px; left: ${f.textpos[1]}px;`;
        await delay(4500);
    }
    
    txt.textContent = '';    
    img.style.display = 'none';
  
    for (let f of fishImages) {
        img.src = f.src;
        img.style = `position: absolute; top: ${f.pos[0]}px; left: ${f.pos[1]}px;opacity: 1;transition:  2s;`
        await delay(4500);
    }
 
}
 
cycle();

 <div  class ="kartink">
  <img>
</div> 

<div  class ="tekst">
  <b>
</div>