Блог

Есть ли способ анимировать положение элемента с постоянным полем?

Представьте, что у нас есть элемент под названием elem1, у которого левое поле составляет 5 пикселей.

Через 2 секунды другой элемент (elem2) перемещается слева от elem1.

Как мы могли бы создать плавную анимацию перехода для elem1 вместо немедленного изменения его положения?

вот фрагмент кода

Действительно простым решением было бы добавить анимацию CSS к одному или обоим элементам.

Вот ваш измененный фрагмент кода

В зависимости от ваших предпочтений, вы можете либо добавить анимацию только к первому элементу (это отодвинет его в сторону до появления второго)

 .elem1 {
  margin-left: 5px;
  animation: old 1.9s ease-out forwards;
}

.elem2 {
  background-color: teal;
}
  

Или вы могли бы добавить анимацию обоих… Я бы, вероятно, выбрал для них linear. Время может быть свободно изменено, поскольку оно не ожидает другого элемента. На самом деле вы могли бы также изменить время первой анимации, но будьте осторожны — если она длится дольше 2 секунд, вы рискуете, что элементы будут перекрываться некоторое время.

 .elem2 {
  background-color: teal;
  animation: new 0.5s linear forwards;
}
  

Это анимации, которые я использовал для этого примера:

 @keyframes new {
  0% {
    position: absolute;
    left: -100px;
  }
  90% {
    left: 7.5px;
  }
  100% {
    position: absolute;
  }
}

@keyframes old {
  from {
    position: absolute;
    left: 0px;
  }
  100% {
    position: absolute;
    left: 110px;
  }
}
  

Надеюсь, это поможет или, по крайней мере, укажет вам правильное направление, наслаждайтесь 🙂