Css Цикл анимации

-1

У меня есть проблема с анимацией, где слова должны итерацию «п» число разCss Цикл анимации

приведенный выше код имеет 9 различных слов, которые имеет замирание в и анимации один за другим, но эта анимация только один раз. Мне нужно, чтобы цикл повторялся снова и снова с той же анимацией, что и последнее слово, заканчивающееся первым, должно быть загружено.

Вот код 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

Я не очень понимаю ваш код, но то, что вы можете сделать, это создать анимацию для каждого элемента и определить одинаковая продолжительность для каждого элемента анимации (общее время анимации). После этого вам просто нужно обработать «что отображается при использовании»%

В моем примере я буду обрабатывать 4 элемента, поэтому 25% от общего времени для каждого из них (и +/- 5% для fadeInfadeOut)

.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

nice one @Arthur :) –

Его рабочий артур, спасибо. Но как насчет того, нужно ли нам до 10-го числа, я не могу добавить значения ключевого кадра для остальных слов, можете ли вы мне помочь. –

Css Цикл анимации

ответ

Смежные вопросы