如何将CSS动画链接到javascript日期对象

Question

我有以下CSS动画，它模仿一个加载栏，持续59秒，然后重置。 我还从javascript的date模块中实时获取信息。

我如何将动画链接到模块，例如，如果第二个计数是48，则动画已完成48/60。

所以我想将JS中的“第二”连接到动画中的“宽度”。

的CSS

    .square {
            width: 30px;
            height: 3px;
            background: red;
            position: relative;
            animation: colors 59s;
            -webkit-animation: colors 59s;
            animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            top: 0px;
            margin-left:-30px;
            }

        @keyframes colors {
            0% {width: 30px;}
            99% {width: 100%} 
        }

        @-webkit-keyframes colors {
            0% {width: 30px;}
            99% {width: 100%} 


}

---

JS

function currentTime() {
    var today = new Date();
    console.log(today);
    hour = today.getHours();
    minute = today.getMinutes();
    second = today.getSeconds();
    minute = formatTime(minute);
    second = formatTime(second);

    text.innerHTML = hour + "." + minute + "." + second;
    console.log(minute);

}

Answer 1

您可以使用Jquery UI制作进度条，并运行一个延迟x miliseconds的循环，然后重新启动多次。

链接： http ： //jqueryui.com/progressbar/

还是在这里看看各种方式： 如何使用jQuery UI进度条？