Output MySQL query results in CSV format?

How to add transition or fade-in effect to dynamically added field

Robinson

I have input section with add/delete button, that adds extra input fields. I am trying to get input field appear with a transition effect instead of popping up instantly.

I tried to use transition but it didn't helped. Is it possible to do it via pure CSS?

Code

var i = 1;

$('#add_patient').click(function() {
  i++;
  $('#tbl_patient').append('<tr id="row' + i + '" class="dynamic-added">
  <td>
     <input type="text" id="patient' + i + '" name="patient" placeholder="Patient Name" required>
  </td>
  <td>
     <button class="btn_remove" type="button" name="remove" id="' + i + '">--</button>
  </td>
</tr>');
});

$(document).on('click', '.btn_remove', function() {
  var button_id = $(this).attr("id");
  $('#row' + button_id + '').remove();
});

td {
  transition: 0.5s ease 1s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tbl_patient">
  <thead>
    <tr>
      <th colspan="2" class="uk-text-center">Patient</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" id="patient" name="patient" placeholder="Patient Name">
      </td>
      <td>
        <button type="button" name="add_patient" id="add_patient">+</button>
      </td>
    </tr>
  </tbody>
</table>