是否可以使用CSS translateX（100％）制作动画？

debugcn 发表于 Dev

选择用户

在动画中，我喜欢使用变换。也可以使它具有left/right属性。但是我喜欢使用变换。我需要将freeze-loading-bar100％向右移动，这应该是一个无限循环。

我怎样才能loading-bar完全右移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>

陪同Afif

保持元素全宽（使用左/右），然后使用渐变进行着色以仅对元素的一部分进行着色。现在，您可以依靠什么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;  /* the width of coloration */

  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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。