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);

Answer 2

一个好方法是使用css：通过更改opacity和rotate属性。

.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}
@keyframes rotateWord {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  2% {
    opacity: 1;
    transform: transform: rotate(10deg);
  }
  5% {
    opacity: 1;
    transform: transform: rotate(20deg);
  }
  17% {
    opacity: 0.5;
    transform: transform: rotate(30deg);
  }
  25% {
    opacity: 0;
    transform: rotate(90deg);
  }
  70% {
    opacity: 0;
    transform: rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: rotate(275deg);
  }
}

<h1 class="remove-bottom" style="margin-top: 40px">Get on the Current Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
						<span>Competitiveness</span>
						<span>abc</span>
						<span>def</span>
						<span>ghi</span>
						<span>jkl</span>
					</div>
    
    </h1>

但是，当然你也可以使用jQuery（但它会使用更多的内存）：

var degrees = 0,
  timer = 1; //Change timer to change FPS

setInterval(function() {
  if (degrees < 359) {
    degrees++;
  } else {
    degrees = 0;
  }

  $('.rw-words-1 span').css('transform', 'rotate(' + degrees + 'deg)'); //.css('opacity',degrees/359+'');

}, timer);

.rw-words {
  display: inline;
  text-indent: 10px;
}
.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #6b969d;
  -webkit-animation: rotateWord 18s linear infinite 0s;
  -moz-animation: rotateWord 18s linear infinite 0s;
  -o-animation: rotateWord 18s linear infinite 0s;
  -ms-animation: rotateWord 18s linear infinite 0s;
  animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words-1 span:nth-child(3) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}
@-webkit-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  20% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes rotateWord {
  0% {
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  5% {
    opacity: 1;
  }
  17% {
    opacity: 0.5;
  }
  25% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<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 Eagle Release.<br>Boost your<div class="rw-words rw-words-1">
						<span>Competitiveness</span>
						<span>abc</span>
						<span>def</span>
						<span>ghi</span>
						<span>jkl</span>
					</div>
    
    </h1>

使用jQuery动画旋转单词

2 个答案: