Animate query append function

Question

UPDATE: I wound up doing this:

<script>
      $(function(){
        $(".typed").typed({
          strings: ["My strings"],
        });
      });
      $(document).ready(function() {
      setTimeout(function() {
        $('<a href="#"><span class="mySpan">Content</span></a>').appendTo('#kick').addClass('animate');
      }, 14000);
    });
    </script>

With the following CSS:

.animate {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -ms-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-name: in;
  -moz-animation-name: in;
  -ms-animation-name: in;
  -o-animation-name: in;
  animation-name: in;
}
    @-webkit-keyframes in {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }
    @-moz-keyframes next {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }
    @-o-keyframes next {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }
    @keyframes next {
    0%   { opacity: 0; }
    100% { opacity: 1; }
    }

I've animated an element that's appended after a timeout function. The timeout lets another function from Typed.js complete before the append is carried out.

I found this post about animating an append, but couldn't get either option that Matt Ball provided to work. Further down the string is an answer from Mark Bell, which is what's in place below.

It works, the animation timing is right, but the animation is a swing from the left and a fade-in -- I want the appended element to fade-in only, and I'm not sure how to accomplish this.

Here's the script:

<script>
      $(function(){
        $(".typed").typed({
          strings: ["My strings"],
        });
      });
      $(document).ready(function() {
      setTimeout(function() {
        $('#myDiv').append('<a href="#"><span class="mySpan">Content</span></a>').hide().show('slow');
      }, 14000);
    });
    </script>

Answer 1

you need to add animate Class after element is appended

$('#myDiv').append('<a 
 href="#"><span
 class="mySpan">Content</span></a>').find('.mySpan').addClass("animation");