时间戳

首页 > 解决方案 > 如何停止进度条动画？

html - 如何停止进度条动画？

问题描述

我试图弄清楚这个问题。动画结束后如何停止进度条？

 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>

标签： htmlcssanimation

解决方案

我认为这就是您要寻找的内容：您的问题的解决方案 - Codepen 链接

你必须使用这个基本结构：

<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=""你可以放任何百分比，动画会相应地工作。

推荐阅读