html - 如何消除旋转文本动画中的跳动？

Closed. This question is off-topic。它当前不接受答案。












                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。

                        4个月前关闭。



仍在学习-但是如何消除这种旋转文本动画的跳动？我在动画句子中只有一个单词，但间隔很短。

为了理解“跳跃”的含义，我将其发布在Codepen上，该图显示了视觉效果：https://codepen.io/kamwam/pen/jONrWmE

.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Playfair Display';
padding: 10px;
}
.rw-words{
    display: inline;
}
.rw-words-1 span{
    max-width: 0;
    display: inline-block;
    opacity: 0;
    overflow: hidden;
    color: #6b969d;
    animation: rotateWord 18s linear infinite 0s;
}
.rw-words-1 span:nth-child(2) {
    animation-delay: 3s;
    color: #6b969d;
}
.rw-words-1 span:nth-child(3) {
    animation-delay: 6s; 
    color: #6b969d; 
}
.rw-words-1 span:nth-child(4) {
    animation-delay: 9s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(5) {
    animation-delay: 12s; 
    color: #6b969d;
}
.rw-words-1 span:nth-child(6) {
    animation-delay: 15s; 
    color: #6b969d;
}
@keyframes rotateWord {
    2% { opacity: 0; max-width: 0; transform: translateY(-30px); }
    5% { opacity: 1; max-width: 200px; transform: translateY(5px);}
    17% { opacity: 1; max-width: 200px; transform: translateY(5px); [enter link description here][1]}
    20% { opacity: 0; max-width: 0; transform: translateY(30px); }
    80% { opacity: 0; max-width: 0; }
}
@media screen and (max-width: 768px){
    .rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
    .rw-sentence { font-size: 9px; }
}

最佳答案

这是您所期望的吗？由于正在旋转的文本具有不同的宽度，因此我尝试在旋转div之后为元素使用页边距，它可以工作。

.rw-wrapper {
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: 'Bree Serif';
  padding: 10px;
}

.after {
  margin-left: 130px;
}

.rw-sentence {
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8);
}

.rw-sentence span {
  color: #444;
  font-size: 200%;
  font-weight: normal;
}

.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;
  -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: #6b889d;
}

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

.rw-words-1 span:nth-child(4) {
  -webkit-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
  color: #7a6b9d;
}

.rw-words-1 span:nth-child(5) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #8d6b9d;
}

.rw-words-1 span:nth-child(6) {
  -webkit-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
  color: #9b6b9d;
}

@-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(30px);
  }
  80% {
    opacity: 0;
  }
  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;
  }
}

<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet' type='text/css'>

<section class="rw-wrapper">
  <div class="rw-sentence">
    <span>Ties made for your</span>
    <div class="rw-words rw-words-1">
      <span>floral</span><span>outdoor</span><span>boho</span><span>woodsy</span>
      <span>nautical</span>
      <span>backyard</span>
    </div>
    <span class="after"> wedding</span>

  </div>
</section>

关于html - 如何消除旋转文本动画中的跳动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57528923/

上一篇：css - 渐变网格

下一篇：javascript - 如何在滚动的容器外部显示绝对位置的div？

相关文章：

javascript - 将彩虹文本应用于类里面的所有文本

css - 固定位置丢失溢出隐藏和 CSS3 动画

javascript - CSS不透明度动画改变位置？

python - Jinja 忽略 HTML 注释

javascript - 增加此 MDL jquery snackbar 的 setTimeout

html - 我的 CODE 中的 CSS 对齐有什么问题

jquery - 用动画从下往上展开div

html - `overflow`属性 `overlay`和 `scroll`有什么区别

html - Thin Spacer CSS 在 IE 8 和 IE 7 中无法正常工作

html - 创建 View 之前使用 html