Можно ли заблокировать анимацию ключевых кадров с помощью шагов? - PullRequest
Новая
       9

Можно ли заблокировать анимацию ключевых кадров с помощью шагов?

0 голосов
/ 24 августа 2018

У меня есть два делителя, которые я хочу использовать в виде баров для статистики, где каждый бар имеет 200px из width.

Внутри бара я хочу анимировать div, только один раз , увеличивая ширину и цвет фона. 

@keyframes first
{
  0%   {background-color: green; width: 0%}
  33%  {background-color: yellow; width: 33%}
  66%  {background-color: orange; width: 66%}
  100% {background-color: red; width: 100%}
}

Я хочу увеличить первый бар до 150 пикселей (по сути, заблокировать анимацию до 150px, а также заблокировать фонцветная анимация).Возможно ли это с помощью CSS или jQuery?

В этом случае все равно, что остановить анимацию на шаге 75%

Я создал JSFiddle: https://jsfiddle.net/gefz5wtL/3/

Ответы [ 2 ]

0 голосов
/ 24 августа 2018

Вы можете использовать animation-fill-mode: forwards и animation-iteration-count: 1; это будет выглядеть так: 

#page {
  margin-top: 50px;
  width: 300px;
  height: 200px;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#box-first, #box-second {
   width: 200px;
   height: 50px;
   background-color: #fff;
   border-radius: 8px;
   margin-top: 10px;
   margin-bottom: 10px;
  }

    @keyframes first
    {
      0%   {background-color: green; width: 0%}
      33%  {background-color: yellow; width: 33%}
      66%  {background-color: orange; width: 66%}
      100% {background-color: red; width: 75%}
    }
    
 
    @keyframes second
    {
      0%   {background-color: green; width: 0%}
      33%  {background-color: yellow; width: 33%}
      66%  {background-color: orange; width: 66%}
      100% {background-color: red; width: 100%}
    }   
    #first{
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background-color: #fff;
      animation: first 2s 1 forwards;
    }
    
    #second {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background-color: #fff;
      animation: second 2s infinite;  
    }
    
<div id="page">
    <div id="box-first">
       <div id="first">       
       </div>       
    </div>

    <div id="box-second">
       <div id="second">       
       </div>
    </div>
</div>
0 голосов
/ 24 августа 2018

Идея состоит в том, чтобы запустить и приостановить анимацию, используя JS, добавив / удалив классы: 

$('#first').addClass('first-start');
setTimeout(function() {
  $('#first').addClass('first-pause');
}, 1500);
#page {
  margin-top: 50px;
  width: 300px;
  height: 200px;
  background-color: #000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#box-first,
#box-second {
  width: 200px;
  height: 50px;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
}

@keyframes first {
  0% {
    background-color: green;
    width: 0%
  }
  33% {
    background-color: yellow;
    width: 33%
  }
  66% {
    background-color: orange;
    width: 66%
  }
  100% {
    background-color: red;
    width: 100%
  }
}

@keyframes second {
  0% {
    background-color: green;
    width: 0%
  }
  33% {
    background-color: yellow;
    width: 33%
  }
  66% {
    background-color: orange;
    width: 66%
  }
  100% {
    background-color: red;
    width: 100%
  }
}

#first {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.first-start {
  animation: first 2s infinite;
}

.first-pause {
  animation-play-state: paused;
}

#second {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
  animation: second 2s infinite;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="box-first">
    <div id="first">
    </div>
  </div>

  <div id="box-second">
    <div id="second">
    </div>
  </div>
</div>
...