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

向前目标将保留执行期间遇到的最后一个关键帧设置的计算值。最后一个关键帧取决于animation-direction和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使用启动动画制作动画进度条

2 个答案: