html - css 关键帧垂直旋转单词

Question

我想用 css 关键帧旋转一个单词。第二个词出现后，出现一片空白，几秒钟后第一个词再次出现。这个词应该垂直旋转。这有效。我只能让它工作，在第二个词之后第一个词立即可见

我的代码:

.rw-words{
	display: inline;
	text-indent: 10px;
}
.rw-words-1 span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	color: #e54517;
	-webkit-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; 
	-ms-animation-delay: 3s; 
	animation-delay: 3s; 
	color: #e54517;
}


@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
	5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
	20% { opacity: 0; -ms-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(90px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}

<div class="rw-words rw-words-1">
                            <span>steuern.</span>
                            <span>erkennen.</span>
                        </div>

看不出错误

Answer 1

替换这个:

.rw-words-1 span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    color: #e54517;
    -webkit-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; 
    -ms-animation-delay: 3s; 
    animation-delay: 3s; 
    color: #e54517;
}

通过这个:

.rw-words-1 span {
  position: absolute;
  opacity: 0;
  overflow: hidden;
  color: #e54517;
  -webkit-animation: rotateWord 6s linear infinite 0s;
  -ms-animation: rotateWord 6s linear infinite 0s;
  animation: rotateWord 6s linear infinite 0s;
}

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

Here is the JSFiddle demo

您的初始代码在重新启动之前等待了整整 18 秒。