css animation fires only when element loses focus

Question

I´ve got a dropdown field where the user can change values via ajax. When the change-event occurs and the data is saved in the database, the user gets a visual "success-feedback" by making the row which contains the dropdownfield glow green. This works fine so far, but the glow animation (css) fires only if the row loses focus / if i hover out of the row with the mouse (no need to click). I would appreciate any advices; maybe the whole concept of how i´m doing this glow is wrong (putting it in "success" in the ajax-call).

javascript:

$("[name='dropdown_status']").on('change', function() {
            var tr = $(this).closest('tr');
            var bestell_id = $(this).attr('id');
            $.ajax({
                type: 'POST',
                url: '/files/ajax/wm_change_status_dt.php',
                data: {
                    id_bestell: bestell_id,
                    id_status: $(this).val()
                },
                success: function(data) {
                    tr.addClass('dropdown_anim');
                    tr.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                        tr.removeClass('dropdown_anim');
                    });
                },
                error: function(jqXHR, status, err) {
                    alert(status + ': ' + err);
                }
            });
        }

css:

.dropdown_anim {
  background: transparent;
  animation: color-me-in 1s;
}

@keyframes color-me-in {
 0% {
    background: transparent;
  }
  /* Adding a step in the middle */
  50% {
    background: #D3FCC7;
  }
  100% {
    background: transparent;
  }
}

Answer 1

Please try following syntax (and add dropdown element id dropdown_status )

$(document).on("change", "#dropdown_status", function() {
            var tr = $(this).closest('tr');
            var bestell_id = $(this).attr('id');
            $.ajax({
                type: 'POST',
                url: '/files/ajax/wm_change_status_dt.php',
                data: {
                    id_bestell: bestell_id,
                    id_status: $(this).val()
                },
                success: function(data) {
                    tr.addClass('dropdown_anim');
                    tr.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
                        tr.removeClass('dropdown_anim');
                    });
                },
                error: function(jqXHR, status, err) {
                    alert(status + ': ' + err);
                }
            });
        }

Answer 2

Okay, got it: turned out, everything worked as it should. The only problem was css code, that was fired when the tablerow is hovered (changing it´s background-color). So, the green glow effect was not visible, or was only visible as soon as the row lost focus.