如何使用 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

试试这个！！

@keyframes slideInFromLeft {
  0% {
    width: 0;
    /*transform: translateX(-100%);*/
  }
  100% {
    width: 90%;
    /*transform: translateX(0);*/
  }
}

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

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

使用 CSS 转换和 Jquery

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

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

.child {
    background: black;
    width: 0;
    height: 100%;
    transition: width 2s;
}

您可以使用此 jquery 代码设置进度。

$(".child").css('width','50%');

Answer 2

看看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>

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

How to make an animate progress bar with startup animation using css

css

animation

progress