纯CSS HTML5进度条动画

Question

纯CSS HTML5进度条动画

5

是否可能仅使用CSS动画HTML5 progress元素？我知道如何使用JS完成它。我想知道是否仅可以使用CSS。

<progress value="0" max="100"></progress>

- erosman

3个回答

3

显然，您可以稍微调整一下这个，我只是从代码示例中组合起来的…但我认为这有点合格了？

div {
    width: 100px;
    height: 50px;
    background: gray;
    position :relative;
    -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 5s infinite;
}


/* Standard syntax */
@keyframes mymove {
    from   {width: 0px;}
    to  {width: 500px;}
}

<body>
  <div></div>
</body>

- Reed

但是这样你无法使用JavaScript控制它的进度，过渡似乎比动画更合适。 - Omri Luzon

我明白，但是OP要求不涉及JS的解决方案，所以这就是我想出来的。 - Reed

1

谢谢@Reed，但我特别感兴趣的是HTML5进度元素。 - erosman

@PhilCollins，它明确写着“使用HTML5进度元素动画”，而不是某个代表进度条的div，怎么能更清晰呢？ - erosman

2

仅使用CSS无法对HTML5进度元素进行动画处理，因为需要操纵伪元素来实现动画效果，而这些伪元素不适用于动画。但是，您可以对父元素进行动画处理，以使其看起来像进度动画。

 <style>
    .progress-container{
      background: lightgray;
      display: inline-block;
      width: 300px;
      overflow-x: hidden;
      animation: moveInRight 3s ease-in 1s ;
     }
    progress{
     width:100%;
     display: inline-block;
     height: 25px; 
    }

    progress[value] {
     vertical-align: middle;
     -moz-appearance: none;
     -webkit-appearance: none;
     appearance: none;
     border: none;
     }

    progress[value]::-webkit-progress-bar {
      background-color: lightgray;
    }
    @keyframes moveInRight {
      0%{
      text-indent: -100%;
      }

      100% {
       text-indent: 0;
      }
}
   </style>
    <div class="progress-container"><progress max="100" value="70"> 
    </progress> 
    </div>

- D0man

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- powerbuoy · Accepted Answer

确实如此：

// The value needs to change for the animation to trigger of course
setTimeout(function () {
   document.getElementsByTagName('progress')[0].value = 100; 
});

progress {
 appearance: none;
 display: block;
 width: 100%;
 height: 1rem;
 border: 0;
}

progress::-webkit-progress-bar {
 background: lightgray;
}

progress::-webkit-progress-value {
 background: #06c;
 transition: width 2.5s ease-in-out;
}

<progress value="10" max="100"></progress>

不过，你需要查看Mozilla/IE伪元素名称。

编辑：如果不改变某种方式的值，元素当然不会移动。因此，我猜你必须使用JS进行更改，但是动画本身完全由CSS处理。