css - 如何使用css制作带有启动动画的动画进度条

Question

我正在尝试使用启动动画实现动画进度条。

问题是我正在使用 transform: translateX(-100%); 产生丑陋的效果 - 进度条在进度区域之外。

核心:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}

.child {  
    background:black;
    width: 50%;
    height: 100%;
    animation: 1s ease-out 0s 1 slideInFromLeft;
} 

<div class="progress">
  <div class="child">x</div>
</div>

我该如何解决这个丑陋的效果？或者有什么更好的方法吗？

Answer 1

看看CSS position property ，你需要相对位置和绝对位置。

然后 animation-fill-mode

forwards The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe depends on the value of animation-direction and animation-iteration-count:

@keyframes slideInFromLeft {
  to{ width: 50%; }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
}

.child {  
    position:absolute;
    left:0;
    top:0;
    background:black;
    width: 0%;
    height: 100%;
    overflow:hidden;
    animation: slideInFromLeft 1s ease forwards;
} 

<div class="progress">
  <div class="child">x</div>
</div>

现在如果你想使用翻译动画它你必须添加 overflow:hidden 到父元素

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
  }
}

.progress {
    width:200px;
    height:50px;
    border:1px solid black;
    position:relative;
    overflow:hidden
}

.child {  
    background:black;
    width: 50%;
    height: 100%; 
    transform: translateX(0%);
    animation: slideInFromLeft 1s ease;
} 

<div class="progress">
  <div class="child">x</div>
</div>