动画进度条与css [英] Animated progress bar with css
本文介绍了动画进度条与css的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我希望进度条在2秒内从0%宽度变为50%宽度。这是我的代码到目前为止:
I want the progress bar to go from 0% width to 50% width in 2 seconds. This is my code so far:
<style>
#progressbar {
background-color: #000000;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
@keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
@-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
</style>
<div id="progressbar">
<div></div>
</div>
但是当我打开页面时,宽度是100%,而不是50%。我做错了什么?
but when I open the page the width is 100% instead of 50%. what have I done wrong?
推荐答案
您的loadbar动画未关闭。动画现在应该工作。我还添加了一个转发关键字,只播放一次动画。
Your loadbar animation was not closed. The animation should work now. I've also added a forwards keyword to only play the animation once.
#progressbar {
background-color: black;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s normal forwards ease-in-out;
-webkit-animation:loadbar 2s normal forwards ease-in-out;
}
@keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
@-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
这篇关于动画进度条与css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文