Question

我有一个应该被50％宽度填充的progess条。这是我当前的进度条的html和css。

HTML：

<div id="ProgressBar">
  <div id="Progress"></div>
</div>

CSS：

#ProgressBar {
  width: 100%;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  padding: 4px;
}

#Progress {
  width: 10%;
  background-color: #4A90E2;
  height: 100%;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  border-color: #4A90E2;
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}

#Progress:hover {
  width: 50%;
}

正如您所看到的，转换是在将鼠标悬停在进度后开始的。我的目标是在页面加载后直接启动此transaition。我知道互联网上有一些例子，但它们都只有淡入效果，我无法弄明白。感谢您的帮助。

这是我的小提琴：

https://jsfiddle.net/Anokrize/ssL9fjy9/

（我想避免任何javascript或jquery，如果可能的话）

Answer 1

如何使用关键帧进行操作，如下所示：

＆＃13;

#ProgressBar {
  width: 100%;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  padding: 4px;
}

#Progress {
  width: 50%;
  background-color: #4A90E2;
  height: 100%;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  border-color: #4A90E2;
  
  animation-name: progressBar;
  animation-iteration-count: 1;
  animation-duration: 2s;
}

@keyframes progressBar {
  0% {
    width: 10%;
  }
  
  100% {
    width: 50%;
  }
}

＆＃13;

<div id="ProgressBar">
  <div id="Progress"></div>
</div>

＆＃13;

Answer 2

完成此任务的直接方法是通过jquery：

$(window).load(function() {
    $("#Progress").css("width", "50%");
});

Answer 3

通常你想要一些提供进度条的东西，所以它实际上显示了进度......但如果你只是想让它在加载时开始，你可以使用animation属性和关键帧。

#ProgressBar {
  width: 100%;
  height: 30px;
  border: 1px solid black;
  border-radius: 7px;
  padding: 4px;
}

#Progress {
  width: 10%;
  background-color: #4A90E2;
  height: 100%;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  border-color: #4A90E2;
  animation: progress 1s ease-out forwards;
}

@keyframes progress {
  from { width: 10%; }
  to { width: 50%; }
}

CSS进度条动画

3 个答案: