旋转字CSS

Question

我正在尝试基于CSS做一个非常简单的旋转单词。我有两个问题：

1）如何使结束时的褪色更快？单词以我目前不喜欢的方式重叠2）如果一个旋转的单词很长，则会弄乱并与下一个单词重叠。我为此预留了一些空间，但是肯定有更好的方法吗？

这里是一个jsfiddle。

https://jsfiddle.net/cqrauey4/

HTML：

    <span>The boy
        <div class="rw-words rw-words-1">
            <span>sees </span>
            <span>wants </span>
            <span>uses </span>
            <span>finds </span>
            <span>needs </span>
            <span>tries </span>
            <span>loves </span>
        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the girl.</span>

CSS：

.rw-words{
display: inline;
text-indent: 10px;}

我无法发布我的整个CSS。它总是告诉我有问题吗？

Answer 1

使用选取框进行旋转。肯定会更流畅！

Answer 2

也许像这样吗？：

/*/
	ROTATING WORDS
	/*/

.rw-words{
	display: inline;
}
.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: auto;
	color: #0f269e;
}
.rw-words-1 span{
	animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
	-ms-animation-delay: 0s; 
	animation-delay: 0s; 
	color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	animation-delay: 2s; 
	color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
	color: #0f269e;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
	color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
	-ms-animation-delay: 10s; 
	animation-delay: 10s; 
	color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #0f269e;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 0; height: 60px; }
	  25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@media screen and (max-width: 768px){
	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
	.rw-sentence { font-size: 9px; }
}

	<span>The boy
			<div class="rw-words rw-words-1">
				<span>sees </span>
				<span>wants </span>
				<span>uses </span>
				<span>finds </span>
				<span>needs </span>
				<span>tries </span>
				<span>loves </span>
			</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the girl.</span>