Проблема преобразования масштаба WebKit

Question

Мне нужна помощь по функциональности масштаба Webkit.

У меня есть файл .css со свойствами, как показано:

@-webkit-keyframes expand 
{
  from {-webkit-transform:scale(1)}
  to {-webkit-transform:scale(1.2)}
}

.image-highlight
{
   -webkit-animation-name: expand;
   -webkit-animation-duration:0.2s;
   -webkit-animation-iteration-count:1;
   -webkit-animation-timing-function:ease;
}

У меня есть HTML с элементами:

  <div id="slider">
    <img src="images/blueMarble_0.PNG" />
    <img src="images/blueMarble_1.PNG" />
    <img src="images/blueMarble_2.PNG" />
    <img src="images/blueMarble_3.PNG" />
    <img src="images/blueMarble_4.PNG" />
  </div>

У меня есть файл js с функцией, которая будет анимировать (масштабировать) среднее изображение массива. и я использую этот оператор jQuery для анимации:

 `$(pic[2]).addClass('image-highlight');`

Этот запрос на самом деле масштабирует изображение (рис. [2]). Но масштабирование происходит в течение 0,2 с и уменьшается до исходного размера. Как я могу сохранить масштабирование даже после завершения 0,2 с? Я не хочу изменять размер до исходного размера. Можно ли это сделать без изменения длительности анимации? Пожалуйста, можете ли вы помочь мне в этом?

Answer 1

Я полагаю, что вы хотите добавить в свой класс: -webkit-animation-fill-mode: both

Это приведет к тому, что начальный ключевой кадр анимации будет показан сразу же, когда ваш image-highlight класс применен и в последнемключевой кадр будет продолжать отображаться после завершения анимации.

Другие значения, которые вы можете использовать:

• нет - эффекты анимации проявляются только во времяопределена продолжительность анимации.(по умолчанию)
• в обратном направлении - исходный ключевой кадр анимации применяется, как только стиль анимации применяется к элементу.Это влияет только на анимации, которые имеют ненулевое значение для -webkit-animation-delay.
• forward - последний ключевой кадр анимации продолжает применяться после завершения последней итерации анимации.

-webkit-animation-fill-mode: forwards, вероятно, также удовлетворит ваши потребности.