Тайминг анимации css

138
12 мая 2019, 19:40

Есть 4 текста и 8 картинок. По одному тексту на 2 картинки. Текст должен менять цвет на красный как только поменялась картинка и оставаться таким на протяжении 2-х картинок и потом менять цвет снова на черный. Как только появляется 3 картинка снова красный до тех пор пока не пройдет 4 картинка и тд. У меня проблема с таймингом. Как ее исправить?

    .div-wrap { 
  display: flex; 
  align-items: center; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
} 
 
/* Текст */ 
 
.div-txt p { 
  color: black; 
  font: bold 16px 'Arial'; 
  text-align: center; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: color-change; 
} 
.div-txt:nth-child(1) p:nth-child(1) { animation-delay: 0s; } 
.div-txt:nth-child(1) p:nth-child(2) { animation-delay: 6s; } 
.div-txt:nth-child(3) p:nth-child(1) { animation-delay: 12s; } 
.div-txt:nth-child(3) p:nth-child(2) { animation-delay: 18s; } 
 
/* Картинки */ 
 
.div-img { position: relative; height: 240px; width: 300px; } 
 
.div-img img { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  display: block; 
  transform: translateX(-50%); 
  opacity: 0; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: fade; 
} 
.div-img img:nth-child(1) { animation-delay: 0s; } 
.div-img img:nth-child(2) { animation-delay: 3s; } 
.div-img img:nth-child(3) { animation-delay: 6s; } 
.div-img img:nth-child(4) { animation-delay: 9s; } 
.div-img img:nth-child(5) { animation-delay: 12s; } 
.div-img img:nth-child(6) { animation-delay: 15s; } 
.div-img img:nth-child(7) { animation-delay: 18s; } 
.div-img img:nth-child(8) { animation-delay: 21s; } 
 
/* Анимации */ 
 
@keyframes color-change { 
  0%, 25%, 100% { color: black; } 
  1%, 24% { color: red; } 
} 
@keyframes fade { 
  0%, 13%, 100% { opacity: 0; } 
  1%, 12% { opacity: 1; } 
} 
 
/* Адаптивность */ 
 
@media all and (min-width: 740px) { 
  .div-wrap { 
    flex-flow: row nowrap; 
    justify-content: space-around; 
  } 
}
<div class="div-wrap"> 
  <div class="div-txt"> 
 <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p>Connect</p> 
      Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text 
      <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p>Calibrate</p> 
     Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text 
  </div> 
  <div class="div-img"> 
    <img src="img/mockups/1.png" title="Image 1" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/2.png" title="Image 2" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/3.png" title="Image 3" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/4.png" title="Image 4" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/5.png" title="Image 5" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/6.png" title="Image 6" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/7.png" title="Image 7" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/8.png" title="Image 8" style="width: 600px; height: 600px;"> 
  </div> 
  <div class="div-txt"> 
   <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p>Train</p> 
     Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text 
     <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p>Analyze</p> 
     Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text 
  </div> 
</div>
то что сверху абзацев это иконки, и после их вставки тоже не горит или горит сразу 3 текста и видно что картинки меняются. т.е у меня есть мокап в котором они должны меняться, помогите с этим тоже). как это решить?

Answer 1

Я вижу решение так:

.div-wrap { 
  display: flex; 
  align-items: center; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
} 
 
/* Текст */ 
 
.div-txt p { 
  color: black; 
  font: bold 16px 'Arial'; 
  text-align: center; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: color-change; 
} 
.div-txt:nth-child(1) p:nth-child(1) { animation-delay: 0s; } 
.div-txt:nth-child(1) p:nth-child(2) { animation-delay: 6s; } 
.div-txt:nth-child(3) p:nth-child(1) { animation-delay: 12s; } 
.div-txt:nth-child(3) p:nth-child(2) { animation-delay: 18s; } 
 
/* Картинки */ 
 
.div-img { position: relative; height: 240px; width: 300px; } 
 
.div-img img { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  display: block; 
  transform: translateX(-50%); 
  opacity: 0; 
  border: 2px solid #ccc; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: fade; 
} 
.div-img img:nth-child(1) { animation-delay: 0s; } 
.div-img img:nth-child(2) { animation-delay: 3s; } 
.div-img img:nth-child(3) { animation-delay: 6s; } 
.div-img img:nth-child(4) { animation-delay: 9s; } 
.div-img img:nth-child(5) { animation-delay: 12s; } 
.div-img img:nth-child(6) { animation-delay: 15s; } 
.div-img img:nth-child(7) { animation-delay: 18s; } 
.div-img img:nth-child(8) { animation-delay: 21s; } 
 
/* Анимации */ 
 
@keyframes color-change { 
  0%, 25%, 100% { color: black; } 
  1%, 24% { color: red; } 
} 
@keyframes fade { 
  0%, 13%, 100% { opacity: 0; } 
  1%, 12% { opacity: 1; } 
} 
 
/* Адаптивность */ 
 
@media all and (min-width: 740px) { 
  .div-wrap { 
    flex-flow: row nowrap; 
    justify-content: space-around; 
  } 
}
<div class="div-wrap"> 
  <div class="div-txt"> 
    <p>business</p> 
    <p>cats</p> 
  </div> 
  <div class="div-img"> 
    <img src="//picsum.photos/300/240?image=998" title="Image 1"> 
    <img src="//picsum.photos/300/240?image=535" title="Image 2"> 
    <img src="//picsum.photos/300/240?image=593" title="Image 3"> 
    <img src="//picsum.photos/300/240?image=219" title="Image 4"> 
    <img src="//picsum.photos/300/240?image=841" title="Image 5"> 
    <img src="//picsum.photos/300/240?image=1011" title="Image 6"> 
    <img src="//picsum.photos/300/240?image=1016" title="Image 7"> 
    <img src="//picsum.photos/300/240?image=976" title="Image 8"> 
  </div> 
  <div class="div-txt"> 
    <p>sports</p> 
    <p>nature</p> 
  </div> 
</div>

UPD:1 После изменения разметки

.div-wrap { 
  display: flex; 
  align-items: center; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
  text-align: center; 
} 
 
/* Текст */ 
 
.div-txt p.label { 
  color: black; 
  font: bold 16px 'Arial'; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: color-change; 
} 
.div-txt:nth-child(1) p.label:nth-child(2) { animation-delay: 0s; } 
.div-txt:nth-child(1) p.label:nth-child(5) { animation-delay: 6s; } 
.div-txt:nth-child(3) p.label:nth-child(2) { animation-delay: 12s; } 
.div-txt:nth-child(3) p.label:nth-child(5) { animation-delay: 18s; } 
 
/* Картинки */ 
 
.div-img { position: relative; height: 600px; width: 600px; border: 2px solid #ccc; } 
 
.div-img img { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  display: block; 
  transform: translateX(-50%); 
  opacity: 0; 
  animation-duration: 24s; 
  animation-iteration-count: infinite; 
  animation-name: fade; 
} 
.div-img img:nth-child(1) { animation-delay: 0s; } 
.div-img img:nth-child(2) { animation-delay: 3s; } 
.div-img img:nth-child(3) { animation-delay: 6s; } 
.div-img img:nth-child(4) { animation-delay: 9s; } 
.div-img img:nth-child(5) { animation-delay: 12s; } 
.div-img img:nth-child(6) { animation-delay: 15s; } 
.div-img img:nth-child(7) { animation-delay: 18s; } 
.div-img img:nth-child(8) { animation-delay: 21s; } 
 
/* Анимации */ 
 
@keyframes color-change { 
  0%, 25%, 100% { color: black; } 
  1%, 24% { color: red; } 
} 
@keyframes fade { 
  0%, 13%, 100% { opacity: 0; } 
  1%, 12% { opacity: 1; } 
} 
 
/* Адаптивность */ 
 
@media all and (min-width: 1170px) { 
  .div-wrap { 
    flex-flow: row nowrap; 
    justify-content: space-around; 
  } 
}
<div class="div-wrap"> 
  <div class="div-txt"> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Connect</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Calibrate</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
  </div> 
  <div class="div-img"> 
    <img src="img/mockups/1.png" title="Image 1" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/2.png" title="Image 2" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/3.png" title="Image 3" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/4.png" title="Image 4" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/5.png" title="Image 5" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/6.png" title="Image 6" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/7.png" title="Image 7" style="width: 600px; height: 600px;"> 
    <img src="img/mockups/8.png" title="Image 8" style="width: 600px; height: 600px;"> 
  </div> 
  <div class="div-txt"> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Train</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Analyze</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
  </div> 
</div>

UPD:2 Переменная для скорости

.div-wrap { 
  display: flex; 
  align-items: center; 
  flex-flow: column nowrap; 
  justify-content: space-between; 
  text-align: center; 
} 
 
:root{ 
  --time: 24; /* Скорость переключения */ 
} 
 
/* Текст */ 
 
.div-txt p.label { 
  color: black; 
  font: bold 16px 'Arial'; 
  animation-duration: calc(var(--time) * 1s); 
  animation-iteration-count: infinite; 
  animation-name: color-change; 
} 
.div-txt:nth-child(1) p.label:nth-child(2) { animation-delay: 0s; } 
.div-txt:nth-child(1) p.label:nth-child(5) { animation-delay: calc(var(--time) / 4 * 1s); } 
.div-txt:nth-child(3) p.label:nth-child(2) { animation-delay: calc(var(--time) / 2 * 1s); } 
.div-txt:nth-child(3) p.label:nth-child(5) { animation-delay: calc(var(--time) / 1.33 * 1s); } 
 
/* Картинки */ 
 
.div-img {  
  position: relative; 
  height: 600px; 
  width: 600px; 
  border: 2px solid #ccc; 
  background: radial-gradient(ellipse at center, rgba(153,153,153,1) 0%,rgba(0,0,0,1) 100%); 
} 
.div-img img { 
  position: absolute; 
  top: 0; 
  left: 50%; 
  display: block; 
  transform: translateX(-50%); 
  opacity: 0; 
  animation-duration: calc(var(--time) * 1s); 
  animation-iteration-count: infinite; 
  animation-name: fade; 
} 
.div-img img:nth-child(1) { animation-delay: 0s; } 
.div-img img:nth-child(2) { animation-delay: calc(var(--time) / 8 * 1s); } 
.div-img img:nth-child(3) { animation-delay: calc(var(--time) / 4 * 1s); } 
.div-img img:nth-child(4) { animation-delay: calc(var(--time) / 2.66 * 1s); } 
.div-img img:nth-child(5) { animation-delay: calc(var(--time) / 2 * 1s); } 
.div-img img:nth-child(6) { animation-delay: calc(var(--time) / 1.6 * 1s); } 
.div-img img:nth-child(7) { animation-delay: calc(var(--time) / 1.33 * 1s); } 
.div-img img:nth-child(8) { animation-delay: calc(var(--time) / 1.14 * 1s); } 
 
/* Анимации */ 
 
@keyframes color-change { 
  0%, 25%, 100% { color: black; } 
  1%, 24% { color: red; } 
} 
@keyframes fade { 
  0%, 20%, 100% { opacity: 0; z-index: auto; } 
  1%, 99% { z-index: 1; } 
  8%, 12% { opacity: 1; } 
} 
 
/* Адаптивность */ 
 
@media all and (min-width: 1170px) { 
  .div-wrap { 
    flex-flow: row nowrap; 
    justify-content: space-around; 
  } 
}
<div class="div-wrap"> 
  <div class="div-txt"> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Connect</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Calibrate</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
  </div> 
  <div class="div-img"> 
    <img src="//picsum.photos/600/600?image=998" title="Image 1"> 
    <img src="//picsum.photos/600/600?image=535" title="Image 2"> 
    <img src="//picsum.photos/600/600?image=593" title="Image 3"> 
    <img src="//picsum.photos/600/600?image=219" title="Image 4"> 
    <img src="//picsum.photos/600/600?image=841" title="Image 5"> 
    <img src="//picsum.photos/600/600?image=1011" title="Image 6"> 
    <img src="//picsum.photos/600/600?image=1016" title="Image 7"> 
    <img src="//picsum.photos/600/600?image=976" title="Image 8"> 
  </div> 
  <div class="div-txt"> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Train</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
    <img src="img/connect.svg" style="width: 36px; height: 36px;"> 
    <p class="label">Analyze</p> 
    <p>Text,Text,Text,Text,Text,Text,Text,Text,<br>Text,Text,Text,Text,Text,Text</p> 
  </div> 
</div>

Answer 2

@keyframes fadeIm-1 
{ 
    0%{  
        transform: scale(0.5); 
        opacity: 0,5;  
    } 
    6.25% { 
        transform: scale(1); 
        opacity: 1; 
    } 
    18.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
 
@keyframes fadeIm-2 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    6.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    18.75%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    31.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
 
@keyframes fadeIm-3 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    18.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    31.25%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    43.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
 
@keyframes fadeIm-4 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    31.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    43.75%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    56.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
 
@keyframes fadeIm-5 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    43.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    56.25%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    68.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
@keyframes fadeIm-6 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    56.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    68.75%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    81.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
@keyframes fadeIm-7 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    68.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    81.25%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    93.75% { 
        transform: scale(0); 
        opacity: 0; 
    } 
} 
@keyframes fadeIm-8 
{ 
    0% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    81.25% { 
        transform: scale(0); 
        opacity: 0; 
    } 
    93.75%{  
        transform: scale(1); 
        opacity: 1; 
    } 
    100% { 
        transform: scale(0.5); 
        opacity: 0.5; 
    } 
} 
.div-style 
{ 
    position: relative;  
    text-align: center;  
    width: 99%;  
} 
 
.img-style 
{   position: absolute; 
    width: 33.3%; 
    margin-top: 8px; 
    border: 1px solid #0000ff;     
    animation-duration: 20s; 
    animation-iteration-count: infinite; 
} 
/*.img-style.next 
{ 
    position: absolute; 
    left: 33.3%; 
    opacity: 0; 
}*/ 
.img-style.im-1 
{  
    animation-name: fadeIm-1; 
    animation-timing-function: linear; 
    transform: scale(0); 
} 
.img-style.next.im-2 
{  
    animation-name: fadeIm-2; 
    animation-timing-function: linear; 
    transform: scale(0); 
} 
.img-style.next.im-3 
{ 
    animation-name: fadeIm-3; 
    animation-timing-function: linear; 
    transform: scale(0); 
} 
.img-style.next.im-4 
{ 
    animation-name: fadeIm-4; 
    animation-timing-function: linear; 
    transform: scale(0); 
}    
.img-style.next.im-5 
{ 
    animation-name: fadeIm-5; 
    animation-timing-function: linear; 
    transform: scale(0); 
}    
.img-style.next.im-6 
{ 
    animation-name: fadeIm-6; 
    animation-timing-function: linear; 
    transform: scale(0); 
}    
.img-style.next.im-7 
{ 
    animation-name: fadeIm-7; 
    animation-timing-function: linear; 
    transform: scale(0); 
 
} 
.img-style.next.im-8 
{ 
    animation-name: fadeIm-8; 
    animation-timing-function: linear; 
    transform: scale(0); 
} 
 
@keyframes color-change { 
    0% { color: red; } 
    49% {color:red;} 
    50% { color: black; } 
    99% {color: black;} 
    100% { color: red; } 
}  
 
p{ 
    -webkit-animation: color-change 10s infinite; 
    -moz-animation: color-change 10s infinite; 
    -o-animation: color-change 10s infinite; 
    -ms-animation: color-change 10s infinite; 
    animation: color-change 10s infinite; 
} 
 
 
 
 
 
 
@-webkit-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@-moz-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@-ms-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
} 
@-o-keyframes color-change { 
    0% { color: red; } 
    50% { color: blue; } 
    100% { color: red; } 
}
<p>Text1</p> 
    <p>Text2</p> 
    <p>Text3</p> 
    <p>Text4</p> 
 
    <div class="div-style"> 
        <img alt="1" title="Image 1" class="img-style im-1"> 
        <img alt="2" title="Image 2" class="img-style next im-2"> 
        <img alt="3" title="Image 3" class="img-style next im-3"> 
        <img alt="4" title="Image 4" class="img-style next im-4"> 
        <img alt="5" title="Image 4" class="img-style next im-5"> 
        <img alt="6" title="Image 4" class="img-style next im-6"> 
        <img alt="7" title="Image 4" class="img-style next im-7"> 
        <img alt="8" title="Image 4" class="img-style next im-8"> 
    </div>

На 1 цвет текста приходят 2 картинки.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте web-king.com.ua
ТОП-10
READ ALSO
Можно ли вставить в поле input file картинку с этой же html стр не скачивая ее?
HTML

Можно ли вставить в поле input file картинку с этой же html стр не скачивая ее?

Можно ли вставить в поле input file картинку с этой же html стр не скачивая ее?

 131
Проверка input на дату
HTML

Проверка input на дату

 174
Изменение стилей элементов массива JQuery
jQuery

Изменение стилей элементов массива JQuery

Изначально у всех элементов с классом "Place" цвет черный, кроме первого (у первого красный)

 183
Добавить элемент рядом
jQuery

Добавить элемент рядом

Допустим есть где-то блок с классом "asd" и рядом с ним нужно добавить DOM, что-то наподобиеappend\

 151