Как играть в CSS3-переходы в цикле?

Следующий стиль - это просто пример того, как устанавливать переходы в CSS3.
Есть ли чистый трюк CSS, чтобы сделать это в цикле?

div {
    width:100px;
    height:100px;
    background:red;
    transition:width 0.1s;
    -webkit-transition:width 0.1s; /* Safari and Chrome */
    -moz-transition:width 0.1s; /* Firefox 4 */
    -o-transition:width 0.1s; /* Opera */
    transition:width 0.1s; /* Opera */
}

div:hover {
    width:300px;
}

Ответы

Ответ 1

Переходы CSS только ожидают от одного набора стилей к другому; то, что вы ищете, это анимация CSS.

Вам нужно определить ключевые кадры анимации и применить его к элементу:

@keyframes changewidth {
  from {
    width: 100px;
  }

  to {
    width: 300px;
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Ознакомьтесь с приведенной выше ссылкой, чтобы узнать, как настроить ее по своему усмотрению, и вам нужно будет добавить префиксы браузера.

Ответ 2

Если вы хотите воспользоваться плавностью 60FPS, которую предлагает свойство "transform", вы можете объединить их:

@keyframes changewidth {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(2);
  }
}

div {
  animation-duration: 0.1s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Подробнее о том, почему transform предлагает более плавные переходы, здесь:https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108