7

我想创建一个排版效果并想旋转句子的一部分。我尝试过使用 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>

4

2 回答 2

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);
于 2013-05-02T07:23:33.653 回答
0

一种好方法是使用 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>

于 2015-03-21T17:12:36.033 回答