纯 CSS HTML5 进度元素动画
[英]Pure CSS HTML5 Progress Element Animation
问题描述
Is it possible to animate HTML5 progress Element just with CSS?
是否可以仅使用 CSS 为 HTML5 进度元素设置动画？ I know how to do it with JS.我知道如何用 JS 做到这一点。 I was wondering of it is possible with CSS only.我想知道仅使用 CSS 是可能的。
<progress value="0" max="100"></progress>
3 个解决方案
解决方案1
4 2017-06-02 16:21:12
It is indeed:确实是：
// 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>
You'll have to look into the Mozilla/IE pseudo element names though.不过，您必须查看 Mozilla/IE 伪元素名称。
Edit: Without changing the value some way the element of course won't move.编辑：如果不以某种方式更改值，元素当然不会移动。 So I guess you have to use JS to change it, but the animation itself is handled completely by CSS.所以我猜你必须使用JS来改变它，但动画本身完全由CSS处理。
解决方案2
2 2017-06-02 16:40:19
Obviously you can tweak this a bit, I just threw it together from a code sample... But I think this sort of qualifies?显然你可以稍微调整一下，我只是从一个代码示例中把它放在一起......但我认为这种资格？
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>
解决方案3
2 2018-10-17 11:48:56
Is it impossible to animate HTML5 progress element just with CSS because you need to manipulate pseudo elements with don't work with animation, although you can animate parent element to make it look like progress animation.是否不可能仅使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.