CSSのループアニメーション

-1

は、他の後のアニメーション1およびフェードアウトを有する9つの異なる単語を有しますこのアニメーションは一度だけです。私が必要とするのは、同じアニメーションで何度も繰り返すループです。最後の単語が最初に読み込まれたときに読み込まれます。ここでCSSのループアニメーション

は、HTML/CSSコードです：

h1.main,p.demos { 
 
    \t -webkit-animation-delay: 18s; 
 
    \t -moz-animation-delay: 18s; 
 
    \t -ms-animation-delay: 18s; 
 
    \t animation-delay: 18s; 
 
    } 
 
    .sp-container { 
 
    \t position: relative; 
 
    \t top: 0px; 
 
    \t left: 0px; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t z-index: 0; 
 
    \t background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
 
    \t background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
 
    \t background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
 
    \t background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7)); 
 
    } 
 
    .sp-content { 
 
    \t position: absolute; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t left: 0px; 
 
    \t top: 0px; 
 
    \t z-index: 1000; 
 
    } 
 
    .sp-container h2 { 
 
    \t position: absolute; 
 
    \t top: 50%; 
 
    \t line-height: 100px; 
 
    \t height: 90px; 
 
    \t margin-top: -50px; 
 
    \t font-size: 90px; 
 
    \t width: 100%; 
 
    \t text-align: center; 
 
    \t color: transparent; 
 
    \t -webkit-animation: blurFadeInOut 3s ease-in backwards; 
 
    \t -moz-animation: blurFadeInOut 3s ease-in backwards; 
 
    \t -ms-animation: blurFadeInOut 3s ease-in backwards; 
 
    \t animation: blurFadeInOut 3s ease-in backwards; 
 
    } 
 

 
    .sp-container h2.frame-6 { 
 
    \t -webkit-animation-delay:0s; 
 
    \t -moz-animation-delay: 0s; 
 
    \t -ms-animation-delay: 0s; 
 
    \t animation-delay: 0s; 
 
    } 
 

 
    .sp-container h2.frame-1 { 
 
    \t -webkit-animation-delay: 3s; 
 
    \t -moz-animation-delay: 3s; 
 
    \t -ms-animation-delay: 3s; 
 
    \t animation-delay: 3s; 
 
    } 
 
    .sp-container h2.frame-2 { 
 
    \t -webkit-animation-delay: 6s; 
 
    \t -moz-animation-delay: 6s; 
 
    \t -ms-animation-delay: 6s; 
 
    \t animation-delay: 6s; 
 
    } 
 
    .sp-container h2.frame-3 { 
 
    \t -webkit-animation-delay: 9s; 
 
    \t -moz-animation-delay: 9s; 
 
    \t -ms-animation-delay: 9s; 
 
    \t animation-delay: 9s; 
 
    } 
 
    .sp-container h2.frame-4 { 
 
    \t font-size: 200px; 
 
    \t -webkit-animation-delay: 12s; 
 
    \t -moz-animation-delay: 12s; 
 
    \t -ms-animation-delay: 12s; 
 
    \t animation-delay: 12s; 
 
    } 
 

 
    .sp-container h2.frame-7 { 
 
    \t font-size: 200px; 
 
    \t -webkit-animation-delay: 15s; 
 
    \t -moz-animation-delay: 15s; 
 
    \t -ms-animation-delay: 15s; 
 
    \t animation-delay: 15s; 
 
    } 
 

 
    .sp-container h2.frame-8 { 
 
    \t font-size: 200px; 
 
    \t -webkit-animation-delay: 18s; 
 
    \t -moz-animation-delay: 18s; 
 
    \t -ms-animation-delay: 18s; 
 
    \t animation-delay: 18s; 
 
    } 
 

 

 
    .sp-container h2.frame-9 { 
 
    \t font-size: 200px; 
 
    \t -webkit-animation-delay: 21s; 
 
    \t -moz-animation-delay: 21s; 
 
    \t -ms-animation-delay: 21s; 
 
    \t animation-delay: 21s; 
 
    } 
 

 

 
    .sp-container h2.frame-5 { 
 
    \t font-size: 200px; 
 
    \t -webkit-animation-delay: 24s; 
 
    \t -moz-animation-delay: 24s; 
 
    \t -ms-animation-delay: 24s; 
 
    \t animation-delay: 24s; 
 
    } 
 

 

 

 
    /* .sp-container h2.frame-5 span { 
 
    \t -webkit-animation: blurFadeIn 3s ease-in 12s backwards; 
 
    \t -moz-animation: blurFadeIn 1s ease-in 12s backwards; 
 
    \t -ms-animation: blurFadeIn 3s ease-in 12s backwards; 
 
    \t animation: blurFadeIn 3s ease-in 12s backwards; 
 
    \t color: transparent; 
 
    \t text-shadow: 0px 0px 1px #fff; 
 
    } */ 
 
    .sp-container h2.frame-5 span:nth-child(2) { 
 
    \t -webkit-animation-delay: 13s; 
 
    \t -moz-animation-delay: 13s; 
 
    \t -ms-animation-delay: 13s; 
 
    \t animation-delay: 13s; 
 
    } 
 
    .sp-container h2.frame-5 span:nth-child(3) { 
 
    \t -webkit-animation-delay: 14s; 
 
    \t -moz-animation-delay: 14s; 
 
    \t -ms-animation-delay: 14s; 
 
    \t animation-delay: 14s; 
 
    } 
 
    .sp-globe { 
 
    \t position: absolute; 
 
    \t width: 282px; 
 
    \t height: 273px; 
 
    \t left: 50%; 
 
    \t top: 50%; 
 
    \t margin: -137px 0 0 -141px; 
 
    \t background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left; 
 
    \t -webkit-animation: fadeInBack 3.6s linear 14s backwards; 
 
    \t -moz-animation: fadeInBack 3.6s linear 14s backwards; 
 
    \t -ms-animation: fadeInBack 3.6s linear 14s backwards; 
 
    \t animation: fadeInBack 3.6s linear 14s backwards; 
 
    \t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
 
    \t filter: alpha(opacity=30); 
 
    \t opacity: 0.3; 
 
    \t -webkit-transform: scale(5); 
 
    \t -moz-transform: scale(5); 
 
    \t -o-transform: scale(5); 
 
    \t -ms-transform: scale(5); 
 
    \t transform: scale(5); 
 
    \t 
 
    } 
 
    .sp-circle-link { 
 
    \t position: absolute; 
 
    \t left: 50%; 
 
    \t bottom: 100px; 
 
    \t margin-left: -50px; 
 
    \t text-align: center; 
 
    \t line-height: 100px; 
 
    \t width: 100px; 
 
    \t height: 100px; 
 
    \t background: #fff; 
 
    \t color: #3f1616; 
 
    \t font-size: 25px; 
 
    \t -webkit-border-radius: 50%; 
 
    \t -moz-border-radius: 50%; 
 
    \t border-radius: 50%; 
 
    \t -webkit-animation: fadeInRotate 1s linear 16s backwards; 
 
    \t -moz-animation: fadeInRotate 1s linear 16s backwards; 
 
    \t -ms-animation: fadeInRotate 1s linear 16s backwards; 
 
    \t animation: fadeInRotate 1s linear 16s backwards; 
 
    \t -webkit-transform: scale(1) rotate(0deg); 
 
    \t -moz-transform: scale(1) rotate(0deg); 
 
    \t -o-transform: scale(1) rotate(0deg); 
 
    \t -ms-transform: scale(1) rotate(0deg); 
 
    \t transform: scale(1) rotate(0deg); 
 
    } 
 
    .sp-circle-link:hover { 
 
    \t background: #85373b; 
 
    \t color: #fff; 
 
    } 
 
    /**/ 
 
    @-webkit-keyframes blurFadeInOut{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 40px #fff; 
 
    \t \t -webkit-transform: scale(1.3); 
 
    \t } 
 
    \t 20%,75%{ 
 
    \t \t opacity: 1; 
 
    \t \t text-shadow: 0px 0px 1px #fff; 
 
    \t \t -webkit-transform: scale(1); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 50px #fff; 
 
    \t \t -webkit-transform: scale(0); 
 
    \t } 
 
    } 
 
    @-webkit-keyframes blurFadeIn{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 40px #fff; 
 
    \t \t -webkit-transform: scale(1.3); 
 
    \t } 
 
    \t 50%{ 
 
    \t \t opacity: 0.5; 
 
    \t \t text-shadow: 0px 0px 10px #fff; 
 
    \t \t -webkit-transform: scale(1.1); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 1; 
 
    \t \t text-shadow: 0px 0px 1px #fff; 
 
    \t \t -webkit-transform: scale(1); 
 
    \t } 
 
    } 
 
    @-webkit-keyframes fadeInBack{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t -webkit-transform: scale(0); 
 
    \t } 
 
    \t 50%{ 
 
    \t \t opacity: 0.4; 
 
    \t \t -webkit-transform: scale(2); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 0.2; 
 
    \t \t -webkit-transform: scale(5); 
 
    \t } 
 
    } 
 
    @-webkit-keyframes fadeInRotate{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t -webkit-transform: scale(0) rotate(360deg); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 1; 
 
    \t \t -webkit-transform: scale(1) rotate(0deg); 
 
    \t } 
 
    } 
 
    /**/ 
 
    @-moz-keyframes blurFadeInOut{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 40px #fff; 
 
    \t \t -moz-transform: scale(1.3); 
 
    \t } 
 
    \t 20%,75%{ 
 
    \t \t opacity: 1; 
 
    \t \t text-shadow: 0px 0px 1px #fff; 
 
    \t \t -moz-transform: scale(1); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 50px #fff; 
 
    \t \t -moz-transform: scale(0); 
 
    \t } 
 
    } 
 
    @-moz-keyframes blurFadeIn{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 40px #fff; 
 
    \t \t -moz-transform: scale(1.3); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 1; 
 
    \t \t text-shadow: 0px 0px 1px #fff; 
 
    \t \t -moz-transform: scale(1); 
 
    \t } 
 
    } 
 
    @-moz-keyframes fadeInBack{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t -moz-transform: scale(0); 
 
    \t } 
 
    \t 50%{ 
 
    \t \t opacity: 0.4; 
 
    \t \t -moz-transform: scale(2); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 0.2; 
 
    \t \t -moz-transform: scale(5); 
 
    \t } 
 
    } 
 
    @-moz-keyframes fadeInRotate{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t -moz-transform: scale(0) rotate(360deg); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 1; 
 
    \t \t -moz-transform: scale(1) rotate(0deg); 
 
    \t } 
 
    } 
 
    /**/ 
 
    @keyframes blurFadeInOut{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 40px #fff; 
 
    \t \t transform: scale(1.3); 
 
    \t } 
 
    \t 20%,75%{ 
 
    \t \t opacity: 1; 
 
    \t \t text-shadow: 0px 0px 1px #fff; 
 
    \t \t transform: scale(1); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 50px #fff; 
 
    \t \t transform: scale(0); 
 
    \t } 
 
    } 
 
    @keyframes blurFadeIn{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t text-shadow: 0px 0px 40px #fff; 
 
    \t \t transform: scale(1.3); 
 
    \t } 
 
    \t 50%{ 
 
    \t \t opacity: 0.5; 
 
    \t \t text-shadow: 0px 0px 10px #fff; 
 
    \t \t transform: scale(1.1); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 1; 
 
    \t \t text-shadow: 0px 0px 1px #fff; 
 
    \t \t transform: scale(1); 
 
    \t } 
 
    } 
 
    @keyframes fadeInBack{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t transform: scale(0); 
 
    \t } 
 
    \t 50%{ 
 
    \t \t opacity: 0.4; 
 
    \t \t transform: scale(2); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 0.2; 
 
    \t \t transform: scale(5); 
 
    \t } 
 
    } 
 
    @keyframes fadeInRotate{ 
 
    \t 0%{ 
 
    \t \t opacity: 0; 
 
    \t \t transform: scale(0) rotate(360deg); 
 
    \t } 
 
    \t 100%{ 
 
    \t \t opacity: 1; 
 
    \t \t transform: scale(1) rotate(0deg); 
 
    \t } 
 
    }

<div class="container"> 
 
    <div class="header"> 
 
     <div class="clr"></div> 
 
    </div> 
 
    <div class="sp-container"> 
 
     <div class="sp-content"> 
 
      <div class="sp-globe"></div> 
 
\t \t \t \t <h2 style="font-size:75px;font-family:bold;" class="frame-6"><span>WE </span> <span>STAND </span> <span>FOR</span></h2> 
 
      \t <h2 style="font-size:68px;" class="frame-1">INNOVATION</h2> 
 
       <h2 style="font-size:68px;" class="frame-2">QUALITY</h2> 
 
      \t <h2 style="font-size:68px;" class="frame-3">RELIABILITY</h2> 
 
\t \t \t \t <h2 style="font-size:68px;" class="frame-4">SAFETY</h2> 
 
      \t <h2 style="font-size:68px;" class="frame-7">VALUES</h2> 
 
\t \t \t \t <h2 style="font-size:68px;" class="frame-8">HARMONY</h2> 
 
      \t <h2 style="font-size:68px;" class="frame-9">UNITY</h2> 
 
      \t <h2 style="font-size:75px;font-family:bold;" class="frame-5"><span>CUSTOMER</span> </h2> 
 

 

 
     </div> 
 
\t \t 
 
    </div> 
 
</div>

出典

2016-06-17 Kabir Ul Althamash

だけではなく、CSSで可能な、あなたはイベントのようなものを管理することができません。 – DaniP

また、 'html'と' css'を同じコードスニペットに入れてください。あなたのコードをすべて送信するのではなく、簡単なバージョンの問題を送信してください。 – Arthur

@DaniP、あなたはアニメーションの遅延を使用しないで、アニメーションの合計時間にアニメーションを作成することでそれを処理することができます（私の答えを確認してください） – Arthur

私は本当にあなたのコードを理解し、しかし、あなたが行うことができますが、各要素のアニメーションを作成することであると定義していませんアニメーションの各要素について同じ持続時間（合計アニメーション時間）。その後、あなただけの私の例では％

を使用して、私はfadeInのために4つの要素なので、各1の合計時間の25％（および+/- 5％を処理する「ときに表示されるものを」処理する必要がありますfadeOut）

.el-1, .el-2, .el-3, .el-4 { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    animation-duration: 10s; /* Total time */ 
 
    animation-iteration-count: infinite; 
 
    animation-delay: 0; /* by default */  
 
} 
 
.el-1 { 
 
    animation-name: example-1; 
 
    background: red; 
 
} 
 
.el-2 { 
 
    animation-name: example-2; 
 
    background: green; 
 
} 
 
.el-3 { 
 
    animation-name: example-3; 
 
    background: blue; 
 
} 
 
.el-4 { 
 
    animation-name: example-4; 
 
    background: yellow; 
 
} 
 

 

 
@keyframes example-1 { 
 
    0% {opacity: 0;} 
 
    5% {opacity: 1;} 
 
    20% {opacity: 1;} 
 
    30% {opacity: 0;} 
 
    100% {opacity: 0;} 
 
} 
 
@keyframes example-2 { 
 
    0% {opacity: 0;} 
 
    20% {opacity: 0;} 
 
    30% {opacity: 1;} 
 
    40% {opacity: 1;} 
 
    60% {opacity: 0;} 
 
    100% {opacity: 0;} 
 
} 
 
@keyframes example-3 { 
 
    0% {opacity: 0;} 
 
    40% {opacity: 0;} 
 
    60% {opacity: 1;} 
 
    70% {opacity: 1;} 
 
    80% {opacity: 0;} 
 
    100% {opacity: 0;} 
 
} 
 
@keyframes example-4 { 
 
    0% {opacity: 0;} 
 
    70% {opacity: 0;} 
 
    80% {opacity: 1;} 
 
    95% {opacity: 1;} 
 
    100% {opacity: 0;} 
 
}

<div class="el-1">1</div> 
 
<div class="el-2">2</div> 
 
<div class="el-3">3</div> 
 
<div class="el-4">4</div>

出典

2016-06-17 13:40:37 Arthur

素敵な@ @アーサー:) –

働くアーサー、ありがとう。しかし、私たちが数字の10まで必要としたら、残りの単語のキーフレーム値を追加できないのですが、助けてください。 –

CSSのループアニメーション

答えて

関連する問題