Rotating Words with jQuery Animations

Question

I want to create a typography effect and want to rotate a part of sentence. I have tried using jQuery animations.

I want to animate word up. Here is my code

window.setInterval(function() {
  $("#tchange").animate({
    "top": "-=15px"
  }, 100).fadeOut("fast");
  $('#tchange').text("Xyz").css('top', '-10px').slideDown("slow");
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="remove-bottom" style="margin-top: 40px">
        Get on the Current Release.<br>
        Boost your 
        <span id="tchange">
            Competitiveness
        </span>
    </h1>

Answer 1

jQuery does not support CSS3 animating. You'll need to either animate purely with CSS, use jQuery to swap CSS classes causing the CSS animation effect or quickly increment the inline CSS3 animation property on the element (like how animating in jQuery actually works).

Eg.

var x=0, timer=1; //Change timer to change FPS

setInterval(function() { 
    x++;
    $('#myelement').css('-webkit-transform', 'scale(' + x + ')'); 
}, timer);