Как отменить CSS анимацию без использования 50% контрольной точки - PullRequest
Новая
       9

Как отменить CSS анимацию без использования 50% контрольной точки

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

Я трачу свое время на написание анимации, содержащей обратный эффект, с контрольной точкой 50%, например: 

element:hover {
animation: XXXX 0.5s ease-in-out 0s 1;
@keyframes XXXX {
    from {
        letter-spacing: 0.1rem;
    }
    50% {
      letter-spacing: 0.5rem;
    }
    to {
      letter-spacing: 0.1rem;
    }
}

Я думаю, что это не элегантно, я хотел бы иметь возможность использовать свойство css для объявления обратного эффекта. Вот так например: 

element:hover {
animation: XXX 0.5s ease-in-out 0s 1 reverse;
@keyframes XXX {
    from {
        letter-spacing: 0.1rem;
    }
    to {
        letter-spacing: 0.5rem;
    }
}

Я искал решение, но ничего не нашел. У вас есть более четкое / красивое решение?

Ответы [ 2 ]

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

То, что вы ищете, вероятно, animation-direction: alternate-reverse;:

Анимация меняет направление в каждом цикле, при этом первая итерация воспроизводится задом наперед.

См .: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

@keyframes XXX {
  from {
    letter-spacing: 0.5rem;
  }
  to {
    letter-spacing: 0.1rem;
  }
}

.box:hover {
  animation: XXX 0.5s ease-in-out 0s 2 alternate-reverse;
}
<div class="box">Some text here</div>
0 голосов
/ 27 августа 2018

Вы можете использовать alternate и определить только 2 итерации: 

.box:hover {
  animation: XXX 0.5s ease-in-out alternate;
  animation-iteration-count: 2;
}

@keyframes XXX {
  from {
    letter-spacing: 0.1rem;
  }
  to {
    letter-spacing: 0.5rem;
  }
}
<div class="box">Some text here</div>
...