html - 如何循环播放该动画，V2

Question

我有一个需要循环播放的动画。我知道我必须使用animation-iteration-count:infinite。但是，我不知道该把它放在哪里。代码如下。每次用的时候都没有效果。把它放在关键帧中，或者普通的 css 没有任何作用。如果我把它放在动画中，它只会相互重叠，造成巨大的困惑。

ul {
  background-color: cadetblue;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  display: inline;
  margin-right: 10px;
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: cadetblue;
  text-decoration: none;
  color: black;
}

li a {
  padding: 14px 16px;
}

a:hover {
  background-color: rgb(35, 185, 165);
}

@import url('https://fonts.googleapis.com/css?family=Roboto:700');
.rotatingText {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 18px;
  text-align: center;
  animation-iteration-count: infinite;
}

.rotatingText-adjective {
  font-family: "Open Sans", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  left: 0;
  margin-bottom: 0;
  margin-top: 50px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(1) {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(2) {
  animation-name: rotate;
  animation-duration: 1.5s;
  animation-delay: 1.75s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(3) {
  animation-name: rotate-last;
  animation-duration: 1.5s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  20%,
  80% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
    animation-iteration-count: infinite;
  }
}

@keyframes rotate-last {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  50%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
}

<div>
  <ul>
    <li><a style='background-color: #1aad0667;' href='index.html'>Home</a></li>
    <li><a href='about.html'>About</a></li>
    <li><a href='pricing.html'>Pricing</a></li>
    <li><a href='contact.html'>Contact</a></li>
  </ul>
</div>
<h1 style='text-align: center; font-size: 50px;'> Lorem Ispum </h1>

<p class="rotatingText">
  The best

  <span class="rotatingText-adjective"> Cloud Gaming </span>
  <span class="rotatingText-adjective"> Cloud Computing </span>
  <span class="rotatingText-adjective"> Server Hosting </span>
</p>

请提供示例! (:

Answer 1

更改关键帧值。根据元素数量添加动画延迟和持续时间。

    @keyframes rotate {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  
  7%, 25% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
  
  33% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
    animation-iteration-count: infinite;
  }
}

ul {
                background-color: cadetblue; 
                list-style-type: none; 
                margin: 0; 
                padding: 0; 
                overflow: hidden;
            }
            li {
                display: inline; 
                margin-right: 10px; 
                float: left;
            }
            a {
                display: block; 
                padding: 8px; 
                background-color: cadetblue; 
                text-decoration: none; 
                color: black;
            }
            li a {
                padding: 14px 16px;
            }
            a:hover {
                background-color: rgb(35, 185, 165);
            }

            @import url('https://fonts.googleapis.com/css?family=Roboto:700');

.rotatingText {
  font-family: "Georgia", serif;
  font-style: italic;
  font-size: 18px;
  text-align: center;
  animation-iteration-count: infinite;
}

.rotatingText-adjective {
  font-family: "Open Sans", sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  left: 0;
  margin-bottom: 0;
  margin-top: 50px;
  opacity: 0;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(1) {
  animation-name: rotate;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(2) {
  animation-name: rotate;
  animation-duration:15s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
}

.rotatingText-adjective:nth-of-type(3) {
  animation-name: rotate;
  animation-duration:15s;
  animation-delay: 10s;
  /* animation-fill-mode: forwards; */
  animation-iteration-count: infinite;
}

@keyframes rotate {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  
  7%, 25% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
  
  33% {
    opacity: 0;
    transform: translate3d(0, -25px, 0);
    animation-iteration-count: infinite;
  }
}

@keyframes rotate-last {
  0% {
    opacity: 1;
    transform: translate3d(0, 50px, 0);
    animation-iteration-count: infinite;
  }
  
    50%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    animation-iteration-count: infinite;
  }
}

<div>
            <ul>
                <li><a style='background-color: #1aad0667;' href='index.html'>Home</a></li>
                <li><a href='about.html'>About</a></li>
                <li><a href='pricing.html'>Pricing</a></li>
                <li><a href='contact.html'>Contact</a></li>
            </ul>
        </div>
        <h1 style='text-align: center; font-size: 50px;'> Lorem Ispum </h1>

        <p class="rotatingText">
          The best
        
          <span class="rotatingText-adjective"> Cloud Gaming </span>

                    <span class="rotatingText-adjective"> Cloud Computing </span>
          <span class="rotatingText-adjective"> Server Hosting </span>
        </p>