SOURCE

console 命令行工具 X clear

                    
>
console
var p=document.querySelector('.progress');
var r=document.getElementById('result');
p.addEventListener('animationStart',start)
p.addEventListener('animationIteration',run)
p.addEventListener('animationEnd',end)
p.addEventListener('webkitAnimationStart',start)
p.addEventListener('webkitAnimationIteration',run)
p.addEventListener('webkitAnimationEnd',end)
function  start() {
 r.innerText='动画开始执行'
}
function  run() {
   r.innerText='动画重新播放'
}
function end() {
   r.innerText='动画执行结束'
}
<div class="bar">
    <div class="progress"></div>
</div>
<div id="result"></div>

<br><br><br><br>
*{
    box-sizing: border-box;
}
.bar{
    height: 15px;
    border-radius: 5px;
    width: 300px;
    background-color: #ccc;
    padding: 3px;
}
.progress{
    height: 100%;
    width: 0;
    background-color: #007aff;
    border-radius: 5px;
    animation: run 3s 2s 2 forwards;
    -webkit-animation: run 3s 2s 2 forwards;
}
@keyframes run {
    to{
        width: 100%;
    }
}
@-webkit-keyframes run {
    to{
        width: 100%;
    }
}