我想循环浏览一系列单词来创建文本旋转效果。我的大部分工作都按预期进行。有什么方法可以在 p 元素的长度上使用 css 过渡吗?
当从 char.length > 10 的对象遍历到 char.length
HTML:
<p><span id="description-rotate"></span> something built on something else.</p>
SASS:
@-webkit-keyframes rotate-text
0%
opacity: 0
30%
opacity: 1
50%
opacity: 1
70%
opacity: 1
100%
opacity: 0
p
font-family: 'Helvetica', sans-serif
.rotate-text
-webkit-animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite
-moz-animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite
-o-animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite
animation: rotate-text 3050ms cubic-bezier(0.645, 0.045, 0.355, 1.000) infinite
JavaScript:
var descriptionArray = ['some text', 'some more text', 'some even longer text'];
var descriptionLength = descriptionArray.length;
var description = $('#description-rotate');
function loop(i) {
description.text(descriptionArray[i%descriptionLength]);
setTimeout(function() {
loop(i+1);
description.addClass('rotate-text');
}, 3050); // This duration must match the length of the animation
}
loop(0);
我意识到这可能不是解释我的目标的好方法,请查看 CodePen 以更好地了解我正在尝试创建的内容。
Thanks!
See: http://codepen.io/anon/pen/JueGx http://codepen.io/anon/pen/JueGx