时间戳

首页 > 解决方案 > 如何使用 css 制作带有启动动画的动画进度条

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

问题描述

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

问题是我使用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>

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

标签： cssanimationprogress

解决方案

尝试这个！！

@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%');

推荐阅读