Question

是否可以使用CSS动画HTML5进度元素？我知道如何用JS做到这一点。我想知道只有CSS才有可能。

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

Answer 1

确实如此：

// 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处理。

Answer 2

显然你可以稍微调整一下，我只是从一个代码示例中把它放在一起......但我认为这种资格有用吗？

<style> 
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;}
}
</style>
<body>
<div></div>

</body>

Answer 3

仅使用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>

纯CSS HTML5进度元素动画

3 个答案: