如何添加动画来翻转瓷砖 - 记忆游戏

Question

这是整个代码，包括css，javascript。 当我点击框时，我试图做，它作为动画漫游到另一边显示一个字符。

这是css代码

<style>
.tile{
    width: 150px;
    /*height: 150px;*/
    background-color: black;
    float: left;
    margin: 10px;
    font-size: 100px;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;

}
p{
    font-size: 50px;
}

span{
    visibility: hidden;
}
</style>
<div id="game_board">
    <div class="tile" onclick="flipTile(this);"><span>A</span></div>
    <div class="tile" onclick="flipTile(this);"><span>A</span></div>
    <div class="tile" onclick="flipTile(this);"><span>B</span></div>
    <div class="tile" onclick="flipTile(this);"><span>B</span></div>
    <div class="tile" onclick="flipTile(this);"><span>C</span></div>
    <div class="tile" onclick="flipTile(this);"><span>C</span></div>
    <div class="tile" onclick="flipTile(this);"><span>D</span></div>
    <div class="tile" onclick="flipTile(this);"><span>D</span></div>
</div>

这是javascript代码，其中是翻转平铺功能

<script>
    var memory_array = ["A", "A", "B", "B","C", "C", "D", "D","E", "E", "F", "F","G", "G", "I", "I"];
    var memory_tiles = [];

    var memory_tile_tmp = null;
    var can_play = true;

    function memory_tile_shuffle(array){
        var i = array.length, j, temp;
        while(--i > 0){
            j = Math.floor(Math.random() * (i+1));
            temp = array[j];
            array[j] = array[i];
            array[i] = temp;
        }
        return array;
    }

    function newBoard(){
        var output = '';
        memory_array=memory_tile_shuffle(memory_array);
        console.log("memory_array "+memory_array);
        for(var i = 0; i < memory_array.length; i++){
            output += '<div class="tile" onclick="flipTile(this)"><span>'+memory_array[i]+'</span></div>';
        }
        document.getElementById('game_board').innerHTML = output;
        console.log(output);
    }

    newBoard();
    console.log(memory_array);
    function flipTile(tile){

        if(memory_tiles.length == 0){
            tile.firstChild.style.visibility="visible";
            tile.style.backgroundColor = "grey";
            memory_tile_tmp = tile; 
            memory_tiles.push(tile);
        }else if(memory_tiles.length == 1 && memory_tiles[0]!= tile){
            memory_tiles.push(tile);
            tile.firstChild.style.visibility="visible";
            tile.style.backgroundColor = "grey";//memory_tile_tmp = null;

            if(memory_tiles[0].firstChild.innerHTML == memory_tiles[1].firstChild.innerHTML){
                //USPEŠEN PAR NE NAREDIM NIČ
                memory_tiles = [];
            }else{
                setTimeout(function(){ 
                    memory_tiles[0].firstChild.style.visibility="hidden";
                    memory_tiles[0].style.backgroundColor = "black";
                    memory_tiles[1].firstChild.style.visibility="hidden";
                    memory_tiles[1].style.backgroundColor = "black";
                    memory_tiles = [];
                    }, 
                1000);
            }
        }


    }
</script>