如何回圈這個影片，V2-有解無憂

我有一個需要回圈播放的影片。我知道我必須使用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>

請舉例說明！(:

uj5u.com熱心網友回復：

更改關鍵幀值。根據元素數量添加影片延遲和持續時間。

    @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>

uj5u.com熱心網友回復：

您可以使用速記animation屬性。infinite應該在為元素設定影片的位置添加，這是一個示例：

@keyframes rotate-anim {
    from {    
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.my-animation {
    animation: rotate-anim 0.5s infinite;
}

<p class="my-animation">Cloud Gaming</p>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/361431.html

標籤：html css 循环动画片

上一篇：CSS影片向右消失并從左側重新出現

下一篇：Swift-如何在選單欄中為NSImage設定影片（不透明度0和1之間的脈沖）？