How to animate sorted table rows

I have a table with <tbody id="tbody"></tbody>

Every 10sec, I send an xhr request to a microcontroller that returns a json formatted response with scanned wifi networks sorted by signal strength :

[...]

    function scanWLAN() {
      let scanRequest = new XMLHttpRequest();
      scanRequest.open("GET", scanUrl);
      scanRequest.responseType = "json";
      scanRequest.send();
      scanRequest.onload = function() {
        loading_el.remove();
        var list = sortByKey(scanRequest.response, "RSSI");
        if (list.length) {
          addRow(list);
        }
      }
    }

    function addRow(list) {
      tbody_el.innerHTML = "";

      for (var i = 0; i < list.length; i++) {
        let newRow = document.createElement('tr');

        let newColSSID = document.createElement('td');
        let newColRSSI = document.createElement('td');
        /*let newColEncryptionType = document.createElement('td');
        let newColBSSID = document.createElement('td');
        let newColChannel = document.createElement('td');
        let newColIsHidden = document.createElement('td');*/

        let SSID = list[i].SSID;
        let RSSI = list[i].RSSI;
        let encryptionType = list[i].encryptionType;
        let BSSID = list[i].BSSID;
        let channel = list[i].channel;
        let isHidden = list[i].isHidden;

        if (SSID == WLAN_SSID) {
          newRow.classList.add("table-success");
        }
        newColSSID.innerHTML = '<span class="cursor-pointer" onclick="autocompleteSSID('' + SSID + '')">' + SSID + '</span>';
        //newColRSSI.textContent = RSSI;
        newColRSSI.innerHTML = '<span title="' + RSSI + ' dBm">' + icons["reception-" + getSignalLevel(RSSI)] + '</span';
        /*newColEncryptionType.textContent = encryptionType;
        newColBSSID.textContent = BSSID;
        newColChannel.textContent = channel;
        newColIsHidden.textContent = isHidden;*/

        newRow.appendChild(newColSSID);
        newRow.appendChild(newColRSSI);
        /*newRow.appendChild(newColEncryptionType);
        newRow.appendChild(newColBSSID);
        newRow.appendChild(newColChannel);
        newRow.appendChild(newColIsHidden);*/

        tbody_el.appendChild(newRow);
      }
    }

[...]

    scanWLAN();
    setInterval(function () {
      scanWLAN();
    }, 11000);

[...]

This refreshes the table rows quite abruptly. I would like to make it look cooler with transitions/ animations when a newly discovered network gets inserted in between existing rows, or when a network sends better signal and is moved up the list.

How can I achieve this with pure javascript or css?

Please note than I can not embed heavy libraries/plugins such a jQuery as all files/codes must be hosted on a chip with very low memory.

What would be the appropriate keywords to find docs about what I am trying to achieve?