文章/答案/技术大牛

发布

社区首页 >问答首页 >旋转多个，例如7个单词- css动画问题

问旋转多个，例如7个单词- css动画问题
EN

Stack Overflow用户

提问于 2020-01-07 16:40:37

回答 1查看 71关注 0票数 0

我正在尝试使用css动画在一行中旋转7个单词。在看了几篇文章后，我可以旋转6个单词，但无法旋转7个单词。如何编写超过7个单词的css？请帮帮我！如何以秒为单位计算时间？任何来源都会很有帮助！这个话题我已经坚持了3天多了！

下面的代码可以用6个单词工作，但如果我输入另一个单词，就会出现重叠问题。

.d-title1 {
  text-indent: 0px;
  justify-content: center;
  text-align: center;
}
.d-title1 h2 {
  position: absolute;
  opacity: 0;
  left:0;
  overflow: hidden;
  -webkit-animation: rotateMyWord 18s linear infinite 0s;
  -ms-animation: rotateMyWord 18s linear infinite 0s;
  animation: rotateMyWord 18s linear infinite 0s;
}
.d-title1 h2:nth-child(2) {
  -webkit-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
}
.d-title1 h2:nth-child(3) {
  -webkit-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
}
.d-title1 h2:nth-child(4) {
  -webkit-animation-delay: 9s; 
  -ms-animation-delay: 9s; 
  animation-delay: 9s; 
}
.d-title1 h2:nth-child(5) {
  -webkit-animation-delay: 12s; 
  -ms-animation-delay: 12s; 
  animation-delay: 12s; 
}
.d-title1 h2:nth-child(6) {
  -webkit-animation-delay: 15s; 
  -ms-animation-delay: 15s; 
  animation-delay: 15s; 
}        

@-webkit-keyframes rotateMyWord {      
  // For 6 words:
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateMyWord {
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rotateMyWord {        
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

<div class="d-title1">
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize ">
          Word 1
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 2
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 3
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 4
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 5
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 6
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 7
  </h2>
 </div>

html

css

css-animations

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-01-07 16:57:43

是像这样吗？

您忘记添加.d-title1 h2:nth-child(7)，然后更改

.d-title1 h2 {
  animation: rotateMyWord 21s linear infinite 0s;
}

加7后为21

.d-title1 {
  text-indent: 0px;
  justify-content: center;
  text-align: center;
}
.d-title1 h2 {
  position: absolute;
  opacity: 0;
  left:0;
  overflow: hidden;
  -webkit-animation: rotateMyWord 21s linear infinite 0s;
  -ms-animation: rotateMyWord 21s linear infinite 0s;
  animation: rotateMyWord 21s linear infinite 0s;
}
.d-title1 h2:nth-child(2) {
  -webkit-animation-delay: 3s; 
  -ms-animation-delay: 3s; 
  animation-delay: 3s; 
}
.d-title1 h2:nth-child(3) {
  -webkit-animation-delay: 6s; 
  -ms-animation-delay: 6s; 
  animation-delay: 6s; 
}
.d-title1 h2:nth-child(4) {
  -webkit-animation-delay: 9s; 
  -ms-animation-delay: 9s; 
  animation-delay: 9s; 
}
.d-title1 h2:nth-child(5) {
  -webkit-animation-delay: 12s; 
  -ms-animation-delay: 12s; 
  animation-delay: 12s; 
}
.d-title1 h2:nth-child(6) {
  -webkit-animation-delay: 15s; 
  -ms-animation-delay: 15s; 
  animation-delay: 15s; 
}
.d-title1 h2:nth-child(7) {
  -webkit-animation-delay: 18s; 
  -ms-animation-delay: 18s; 
  animation-delay: 18s; 
}    

@-webkit-keyframes rotateMyWord {      
  // For 6 words:
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes rotateMyWord {
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes rotateMyWord {        
  0% { opacity: 0; }
  2% { opacity: 0; transform: translateY(-30px); }
  5% { opacity: 1; transform: translateY(0px);}
  17% { opacity: 1; transform: translateY(0px); }
  20% { opacity: 0; transform: translateY(30px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

<div class="d-title1">
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize ">
          Word 1
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 2
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 3
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 4
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 5
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 6
  </h2>
  <h2 class="display-3 fw-200 mb-4 text-white text-capitalize">
          Word 7
  </h2>
 </div>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/59624827

复制

相似问题

问旋转多个，例如7个单词- css动画问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问旋转多个，例如7个单词- css动画问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问旋转多个，例如7个单词- css动画问题
EN