Question

我希望在一个句子中用Word自动在多个单词选项之间轮换。我希望这个词停在最后一个字并停留在那里。我怎么能用html / css做到这一点？

以下是codepen的链接。

<style>
.text-wrapper {
        text-align: center;
    }
    .animated-words {
        display: inline-block;
    }
    .animated-words span:nth-child(2) { 
        -webkit-animation-delay: 3s; 
        -ms-animation-delay: 3s; 
        animation-delay: 3s; 
        color: #6b889d;
    }
    .animated-words span:nth-child(3) { 
        -webkit-animation-delay: 6s; 
        -ms-animation-delay: 6s; 
        animation-delay: 6s; 
        color: #6b739d; 
    }
    .animated-words span:nth-child(4) { 
        -webkit-animation-delay: 9s; 
        -ms-animation-delay: 9s; 
        animation-delay: 9s; 
        color: #7a6b9d;
    }
    .animated-words span:nth-child(5) { 
        -webkit-animation-delay: 12s; 
        -ms-animation-delay: 12s; 
        animation-delay: 12s; 
        color: #8d6b9d;
    }
    .animated-words span:nth-child(6) { 
        -webkit-animation-delay: 15s; 
        -ms-animation-delay: 15s; 
        animation-delay: 15s; 
        color: #9b6b9d;
    }
    .animated-words span {
        position: absolute;
        opacity: 0;
        overflow: hidden;
        color: #6b969d;
        -webkit-animation: animateWord 18s linear infinite 0s;
        -ms-animation: animateWord 18s linear infinite 0s;
        animation: animateWord 18s linear infinite 0s;
    }
    @-webkit-keyframes animateWord {
        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; }
    }

</style>
<div class="text-wrapper">
    The quick brown fox jumps over the lazy&nbsp;
    <div class="animated-words">
        <span class="am1">dog.</span>
        <span class="am1">horse.</span>
        <span class="am1">frog.</span>
        <span class="am1">cat.</span>
        <span class="am1">mouse.</span>
        <span class="am1">rabbit.</span>
    </div>    
</div>

以下是示例https://tympanus.net/Tutorials/CSS3RotatingWords/

的链接

这个词会保持循环，或者只是在最后消失，这取决于我是否将无限变为真。

Answer 1

完整link。

首先，将动画属性从无限更改为线性：

animation: animateWord 18s linear 1 0s;

然后，对于姓氏，我不会运行第一个动画，而是另一个看起来像这样的动画：

@-webkit-keyframes animateWordLast {
    0% { opacity: 0; } 
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    100% { opacity: 1; }
}

为了使最后一个单词保持更长时间（但不是永远），最后添加这些单词似乎可以完成这项任务：

.animated-words .last {
    -webkit-animation: animateWordLast 100s linear 1 18s;
    animation: animateWordLast 100s linear 1 18s;
}
@-webkit-keyframes animateWordLast {
    0% { opacity: 1; }
    100% { opacity: 1; }
}

检查100s持续时间，你可以在那里放一个大数字，比如3600（1小时），以及18s第二个动画的延迟。

Answer 2

我无法让其中任何一个对我有用......我正在使用类似的旋转词，并且我将线性无穷大更改为线性就像你说的（未显示）

            .rotateWords{
              -webkit-animation: rotateWords 12s linear 1 0s;
            -moz-animation: rotateWords 12s linear 1 0s;
            -o-animation: rotateWords 12s linear 1  0s;
            -ms-animation: rotateWords 12s linear 1 0s;
          animation: rotateWords 12s linear 1 0s;
            }
            .rotating-words:nth-child(2) {
            -webkit-animation-delay: 2s;
            -moz-animation-delay: 2s;
            -o-animation-delay: 2s;
            -ms-animation-delay: 2s;
            animation-delay: 2s;
            }
           .rotating-words:nth-child(3) {
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            -ms-animation-delay: 4s;
          animation-delay: 4s;
          }
          .rotating-words:nth-child(4) {
          -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            -ms-animation-delay: 6s;
          animation-delay: 6s;  
    }
        .rotating-words:nth-child(5) {
        -webkit-animation-delay: 8s;
            -moz-animation-delay: 8s;
            -o-animation-delay: 8s;
            -ms-animation-delay: 8s;
          animation-delay: 8s;  
        }
        .rotate-last:nth-child(6) {  
        -webkit-animation-delay: 12s;
            -moz-animation-delay: 12s;
            -o-animation-delay: 12s;
            -ms-animation-delay: 12s;
          animation-delay: 12s;
        }
    
    @keyframes rotateWords {
      0% {
        opacity: 0 ;
      }
      8% {
        opacity: 1 ;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
        -ms-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
      }
      10% {
        opacity: 1;
      }
      15% {
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }

用CSS动画旋转单词。我怎么停下来？

2 个答案: