CSS-анимация перекрывает полосатые строки таблицы начальной загрузки

$(document).ready(function () {

    $(".lblRetry").hover(function () {
        var grId = this.attributes.value.value;
        var grRow = document.getElementById(grId);

        grRow.classList.add("testAnimation");

    }, function () {
        removeClass(this);
    });
});


function removeClass(e) {
    var grId = e.attributes.value.value;
    var grRow = document.getElementById(grId);
    setTimeout(function () {
        grRow.classList.remove("testAnimation");
    }, 4000);
};

.testAnimation {
    -webkit-animation: frames linear 1s infinite alternate;
    animation: frames linear 1s infinite alternate;
    animation-iteration-count: 4;
}

@-webkit-keyframes frames {
    0% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 0px dodgerblue;
    }

    25% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 10px dodgerblue;
    }

    50% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 20px dodgerblue;
    }

    75% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 25px dodgerblue;
    }

    100% {
        outline: none;
        border-color: #9ecaed;
        box-shadow: 0px 0px 30px dodgerblue;
    }
}

<div class = "container-fluid">
    <table class = "table table-striped">
        <thead>
            <tr class = "header">
                <th class = "sortableTableHeader" style = "white-space:nowrap; width:8em;" data-fieldname = "ExecutionDate"><span class = "link">Executed</span></th>
                <th class = "sortableTableHeader" data-fieldname = "Shippers" style = "width:10em;white-space:nowrap;"><span class = "link">Shipper</span></th>
                <th class = "sortableTableHeader" data-fieldname = "Retry" style = "width:2em;white-space:nowrap;"></th>
                <th style = "width:7em;">
                    Orders
                    <span class = "glyphicon glyphicon-info-sign info" aria-hidden = "true" data-html = "true" data-toggle = "tooltip" title = "First number shows the amount of labels generated at first attempt. <br/> <br/> Numbers adding up to it in green means the amount of labels that have been created when a retry has been attempted.  <br/><br/> Numbers in red mean the amount of un-created labels (still in error state).  <br/><br/> Last number means the total amount of orders selected."></span>
                </th>
                <th style = "width:14em;">Status</th>
            </tr>
        </thead>
        <tbody>
        <tr id = "1">
           <td>
           Date
           </td>
           <td>
           DHL
           </td>
           <td >
           <span class = "glyphicon glyphicon-repeat lblRetry" value = "2" aria-hidden = "true" data-html = "true" data-toggle = "tooltip" title = "This label is a retry label. Originated from another group currently being highlighted."></span>
           </td>
           <td>
           16
           </td>
           <td>
           All good!
           </td>
           </tr>
           <tr id = "2">
           <td>
           Date
           </td>
           <td>
           DHL
           </td>
           <td >
           <span class = "glyphicon glyphicon-repeat lblRetry" value = "1" aria-hidden = "true" data-html = "true" data-toggle = "tooltip" title = "This label is a retry label. Originated from another group currently being highlighted."></span>
           </td>
           <td>
           16
           </td>
           <td>
           All good!
           </td>
           </tr>
        </tbody>
    </table>
</div>

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>