使用jQuery动画旋转单词

Question

我想创建一个排版效果,并希望旋转一部分句子.我尝试过使用jQuery动画.

我想动画一下单词.这是我的代码

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 不支持 CSS3 动画。您需要纯粹使用 CSS 制作动画，使用 jQuery 交换导致 CSS 动画效果的 CSS 类，或者快速增加元素上的内联 CSS3 动画属性（就像 jQuery 中的动画实际工作方式一样）。

例如。

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

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