Изменить начало анимации CSS3 - PullRequest
Новая
       6

Изменить начало анимации CSS3

0 голосов
/ 14 мая 2018

Я хотел создать таблицу с изменяющими цвет строками (например: от полного зеленого фона до полного красного за полчаса, начиная с 12 часов).Мне удалось это сделать, но теперь я подумал о случае, когда сайт вызывается, когда временной ряд уже на 10 минут больше (так что не полчаса прогрессирования градиента, а всего 20 минут, и строка не начнется полностью зеленым),

, поэтому я подумал, можно ли установить время начала анимации CSS.Может быть, по ключевому кадру?я буквально понятия не имею, потому что я мало работал с css3 в прошлый раз, и я был бы благодарен за любую информацию:)

[моя анимация css] 

.timing {
background: linear-gradient(88deg, #05a400, #ff0000);
background-size: 400% 400%;

-webkit-animation: Gradient 180s linear infinite;
-moz-animation: Gradient 180s linear infinite;
animation: Gradient 180s linear infinite;
}

@-webkit-keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
@-moz-keyframes Gradient {
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}
@keyframes Gradient { 
0%{background-position:0% 53%}
50%{background-position:100% 48%}
100%{background-position:0% 53%}
}

и извините, еслив заголовке нет четкого определения моего вопроса, я не нашел подходящих слов ...

1 Ответ

0 голосов
/ 14 мая 2018

Вы можете использовать переменную CSS, чтобы настроить время начала анимации, затем вы можете просто изменить ее, используя JS: 

document.querySelectorAll('.timing')[1].style.setProperty('--t','5s');
.timing {
  background: linear-gradient(88deg, #05a400, #ff0000);
  background-size: 400% 400%;
  animation: Gradient 2s linear infinite var(--t,0s);
  height:80px;
  color:#fff;
  font-size:30px;
}

@keyframes Gradient {
  0% {
    background-position: 0% 53%
  }
  50% {
    background-position: 100% 48%
  }
  100% {
    background-position: 0% 53%
  }
}
<div  class="timing">
This one will start immediately
</div>
<div  class="timing">
This one will start after 5s
</div>
...