我试图弄清楚这个问题。动画结束后如何停止进度栏?
ul li {list-style:none;}
li {width:100%;height:30%;background-color:#ccc;margin-top:20px;position:relative;}
.skillsBar ul li .bar{
animation: Ani linear 7s 1 normal;background-color:#f00;height: 100%; position: absolute; top:0;
}
.skillsContWrpa .skillsBar ul li .bar{
animation-name:Ani;
animation-duration: 7s;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-direction: alternate;
animation-fill-mode: both;
}
@keyframes Ani {
0% { width:0%; }
100% { width:90%; }
}
<div class="skillsBar">
<ul>
<li><span>PHOTOSHOP 90%</span>
<div class="bar"></div>
</li>
<li><span>HTML CSS 80%</span></li>
<li><span>DEVELOPMENT 70%</span></li>
<li><span>MARKETING 80%</span></li>
</ul>
</div>
答案 0 :(得分:0)
我认为这是您要寻找的:Solution to your question - Codepen link
您必须使用以下基本结构:
<div class="skillbar clearfix javascript" data-percent="80%">
<h4 class="skillbar-title"><span>Development</span></h4>
<div class="skillbar-bar"></div>
<div class="skill-bar-percent">80%</div>
</div>
在data-percent=""
内,您可以输入任何百分比,动画将相应地起作用。
答案 1 :(得分:0)
添加“动画填充模式:转发;”到您的CSS类“ .bar”
forward -> The element will retain the style
ul li {list-style:none;}
li {width:100%;height:30%;background-color:#ccc;margin-top:20px;position:relative;}
.bar{
background-color:#f00;
height: 100%;
position: absolute;
top:0;
animation: Ani linear 7s normal;
animation-fill-mode: forwards;
}
@keyframes Ani {
0% { width:0%; }
100% { width:90%; }
}
<div class="skillsBar">
<ul>
<li>
<span>PHOTOSHOP 90%</span>
<div class="bar"></div>
</li>
<li><span>HTML CSS 80%</span></li>
<li><span>DEVELOPMENT 70%</span></li>
<li><span>MARKETING 80%</span></li>
</ul>
</div>
由最后一个关键帧设置的值。