Паузы в анимации на css?

Question

[agromov91]

Есть элемент который при помощи анимации перемещается, возвращается на исходное место и так по кругу. Как можно сделать задержки в каждой точке?

.metall {
  position: absolute;
  -webkit-animation: backlight 2s linear infinite;
  -moz-animation: backlight 2s linear infinite;
  -ms-animation: backlight 2s linear infinite;
  -o-animation: backlight 2s linear infinite;
  animation: backlight 2s linear infinite;
}

@-webkit-keyframes backlight {
  0% {
    -webkit-transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(25px, -25px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@-moz-keyframes backlight {
  0% {
    -moz-transform: translate(0, 0);
  }
  50% {
    -moz-transform: translate(25px, -25px);
  }
  100% {
    -moz-transform: translate(0, 0);
  }
}
@-o-keyframes backlight {
  0% {
    -o-transform: translate(0, 0);
  }
  50% {
    -o-transform: translate(25px, -25px);
  }
  100% {
    -o-transform: translate(0, 0);
  }
}
@keyframes backlight {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(25px, -25px);
  }
  100% {
    transform: translate(0, 0);
  }
}

Answer 1

[RAX7]

Comments

[agromov91]

А время паузы как увеличить?

[RAX7]

agromov91,
10%, 90%
40%, 60%
в этом примере паузы по 20% от общего времени анимации. Увеличь разницу в процентах чтобы паузы стали больше.

Answer 2

[Владимир]

кто тебе мешает добавить ключевую точку 10 и 50 и 60 процентов с позициями 0 0 и 25 25 ?

Answer 3

[Ilya Muromtsev]

задержка

Comments

[agromov91]

Пробовал. В таком случае задержка только перед первым стартом.