javascript - Javascript がトランジションで innerHTML を変更する

Question

特定の他のdivがホバーされたときに、このテキストを特定のdivに表示するこの関数があります:

    function description(x){
    if(x=="tabuweb"){
        document.getElementById("description_box").innerHTML = "TabuWeb is a game designed for primary school children " +
                "to learn mathematics<br>" +
                "The main goal of the game is to get to the finish line by answering math questions<br>" +
                "Give it a try!";
    }
    if(x=="squares"){
        document.getElementById("description_box").innerHTML = "Squares is a maze game that focus on memory<br>" +
                "Click the squares around the white one. You must find a route to the blue square<br>" +
                "It's all about trial and error<br>"+
                "Good Luck!";
    }
}

私のウェブページ ( cmfproject ) にあります。そこにある 2 つのゲームにカーソルを合わせます。

問題は、画像のホバー効果のようにテキストをスムーズに表示して大きくしたり、すぐに飛び出す以外の何かを作成したりするにはどうすればよいかということです。