Можно ли использовать CSS translateX (100%) для создания движущейся анимации?

Question

В своей анимации мне нравится использовать трансформацию. Это также возможно сделать со свойством left / right. Но мне нравится использовать transform. Мне нужно переместить freeze-loading-bar на 100% вправо, и это должен быть бесконечный цикл.

Как я могу переместить полосу загрузки вправо на 100% / полностью?

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;

  padding: 2rem;

  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  
  /** disual purpose **/
  /** overflow: hidden; **/
  
}

.freeze-loading-bar {
  position: absolute;
  left: 0;
  width: 80px;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
    from {
        transform: translateX(-100px);
    }

    to {
        transform: translateX(100%);
    }
}

<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>

_{Свободный перевод вопроса Is it possible to use CSS translateX(100%) to make a moving animation? от участника @Tahazzot.}

Answer 1

Сохраняйте элемент на всю ширину (используя left/right), затем используйте градиент для окраски, чтобы раскрасить только его часть. Теперь вы можете положиться на translateX(100%) независимо от ширины раскраски:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* ширина окраски */

  position: absolute;
  left: calc(-1*var(--w));
  right: 0;
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
   animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  to {
    transform: translateX(100%);
  }
}

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

Другой вид анимации:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px; /* the width of coloration */

  position: absolute;
  left: 0;
  right: var(--w);
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
   animation: freeze-loading-bar 1s linear infinite alternate;
}

@keyframes freeze-loading-bar {
  to {
    transform: translateX(100%);
  }
}

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

Другой синтаксис:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
  animation: freeze-loading-bar 2s linear infinite;
  transform: translateX(calc(-1*var(--w)));
}

@keyframes freeze-loading-bar {
  to  {
     transform: translateX(100%);
  }
}

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

И еще один пример:

.freeze-loading {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 1rem auto;
  height: 5px;
  box-shadow: inset 1px 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  --w:80px;  /* the width of coloration */

  position: absolute;
  right: 0;
  width:calc(100% + var(--w));
  height: 100%;
  background:
   linear-gradient(rgb(0, 132, 255) 0 0) 
   0 / var(--w) 100%  
   no-repeat;
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  to  {
     transform: translateX(100%);
  }
}

<div class="freeze-loading">
  <div class="freeze-loading-bar"></div>
</div>

<div class="freeze-loading">
  <div class="freeze-loading-bar" style="--w:150px;"></div>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

С точки зрения отзывчивости используйте %, а не px, чем проста математика,

Если width полосы составляет 20% (1/5 родительской)

translateX from -100% to 500% (100% * 5)

*,
*::before,
*::after {
  box-sizing: border-box;
}

.app-view {
  height: 200px;
  max-width: 300px;
  margin: 1rem auto;
  background-color: #fff;
  box-shadow: -2px 2px 4px 0 #e0e0e0ad, 1px -1px 9px 0 #dddddd2e;
  padding: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.freeze-loading {
  position: relative;
  width: 100%;
  height: 5px;
  box-shadow: inset 0 0px 4px 0 #ddd;
  overflow: hidden;
}

.freeze-loading-bar {
  position: relative;
  top: 0;
  width: 20%;
  height: 100%;
  background-color: rgb(0, 132, 255);
  animation: freeze-loading-bar 2s linear infinite;
}

@keyframes freeze-loading-bar {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(500%);
  }
}

<div class="app-view">
  <div class="freeze-loading">
    <div class="freeze-loading-bar"></div>
  </div>
</div>

_{Свободный перевод ответа от участника @Roko C. Buljan.}

БЛОГ НА HUSL

Можно ли использовать CSS translateX (100%) для создания движущейся анимации?

Ответы (2 шт):