Prompt Title: CSS animate @keyframes

Приношу извинения за предыдущую ошибку. Вместо использования transform-origin для управления точкой преобразования, в данном случае лучше использовать left и right для анимации ширины блока. Вот исправленный пример:

cssCopy code
@keyframes expand-shrink {
  0% {
    width: 0;
    left: 0;
    right: auto;
  }
  50% {
    width: 100%;
    left: 0;
    right: auto;
  }
  50.1% {
    width: 100%;
    left: auto;
    right: 0;
  }
  100% {
    width: 0;
    left: auto;
    right: 0;
  }
}

.element {
  position: relative;
  width: 0;
  height: 100px;
  background-color: red;
  animation: expand-shrink 2s ease-in-out infinite;
}

В этом исправленном примере мы используем свойства left и right для управления положением блока при анимации.

• На 0% времени анимации, блок имеет width: 0, left: 0 и right: auto, чтобы он начинал с левой стороны.
• На 50% времени анимации, блок расширяется до width: 100% с left: 0 и right: auto, чтобы он занимал всю доступную ширину.
• На 50.1% времени анимации, блок продолжает быть на полной ширине (width: 100%), но меняет положение на правую сторону с left: auto и right: 0.
• На 100% времени анимации, блок сужается обратно до width: 0 с left: auto и right: 0, чтобы он оказался справа.

Также мы добавили свойство position: relative для элемента .element, чтобы свойства left и right могли корректно работать.

Теперь анимация должна правильно работать, и блок будет разворачиваться с левой стороны, достигать полной ширины, а затем сжиматься справа. Пожалуйста, попробуйте этот исправленный код.