Анимационный эффект css

Question

Я просто играю с анимацией в css.

Это код, который я пишу ...

html:

<div class="wrapper">
     <div class="item-1"></div>
     <div class="item-2"></div>
     <div class="item-3"></div>
     <div class="item-4"></div>
     <div class="item-5"></div>
     <div class="item-6"></div>
 </div>

И css:

.wrapper {
    display: grid;
    width: fit-content;
    grid-template-columns: 150px 150px 150px;
    grid-template-rows: 150px 150px;
    grid-gap: 1rem;
    position: relative;
}

.wrapper>div {
    background: linear-gradient(to bottom right, crimson, yellow);
    border: 5px solid #555;
    border-radius: 5px;
    width: 150px;
    height: 150px;
}

.item-6 {
    animation-name: playthis;
    animation-duration: 5s;
    animation-fill-mode: both;
    animation-iteration-count: initial;
}

@keyframes playthis {
    0% {
        width: 100%;
    }

    50% {
        width: 400%;
    }

    100% {
        width: 100%;
    }
}

Так что это простая анимация, но я пытаюсь понять, как я могу добиться определенного эффекта, а именно: когда коробка достигает Ширина 400%, пусть правая граница останется фиксированной в этом положении, а затем вернется к своему первоначальному размеру ... как если бы правая граница перетаскивала левую к себе ... Надеюсь, я был чист!

Answer 1

Это возможное решение с использованием margin-left.

:root{
  --maxWidth: 200%;
  --finalWidth: 100%;
}

.wrapper {
  display: grid;
  width: fit-content;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px;
  grid-gap: 1rem;
  position: relative;
}

.wrapper>div {
  background: linear-gradient(to bottom right, crimson, yellow);
  border: 5px solid #555;
  border-radius: 5px;
  width: 150px;
  height: 150px;
}

.item-6 {
  animation-name: playthis;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: initial;
}

@keyframes playthis {
  0% {
    width: var(--finalWidth);
  }
  50% {
    width: var(--maxWidth);
    margin-left: 0%
  }
  100% {
    width: var(--finalWidth);
    margin-left: calc(var(--maxWidth) - var(--finalWidth));
  }
}

<div class="wrapper">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
  <div class="item-4"></div>
  <div class="item-5"></div>
  <div class="item-6"></div>
</div>

Значение поля слева в последних ключевых кадрах можно рассчитать, используя width вашего объекта, например:

maxWidth - finalWidth 

Где maxWidth - ширина в 50% вашей анимации и finalWidth ширина в конце вашей анимации. Чтобы упростить использование кода, я использовал css переменных и вычислил окончательный margin-left