CSS3关键帧进度栏 [英] CSS3 keyframe progress bar

问题描述

当您看到小提琴时，您会看到动画有点跳跃.它应该从左到右达到100％的宽度，然后在右侧挤压回0％的宽度.该如何解决?

When you see the fiddle you will see that the animation is somehow jumpy. It should got from left to right to 100% width and then squeeze back to 0% width on the right side. How to fix that?

http://jsfiddle.net/j44gbwna/

div:after {
    content: "";        
    height: 3px;
    background: red;        
    position: absolute;
    animation: loader 2s;
    -webkit-animation: loader 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
    bottom: 0px;        
    margin-left: 0;
}

@keyframes loader {
    0% {left: 0px;}
    99% { left: 100%;} 
}

@-webkit-keyframes loader {
    0% {width: 0%;left:0;}
    50% { width: 100%;} 
    99% { width: 0%;right:0;} 
}

推荐答案

进行CSS关键帧动画时，请尝试在所有步骤中定义尽可能多的属性，因为当您在动画中引入新属性时，它通常采用默认值/初始值，该值有时与您期望的值不同:

When doing CSS keyframe animations, try to define as many properties as you can in all the steps, because when you introduce a new property mid-animation, it usually takes the default/initial value which is sometimes different from what you'd expect:

@-webkit-keyframes loader {
    0% {width: 0%;left:0;right:0}
    50% { width: 100%;left:0;right:0} 
    99% { width: 0%;left:100%;right:0} 
}

http://jsfiddle.net/j44gbwna/3/

div:after {
	content: "";
	/* width: 40px; */
    height: 3px;
    background: red;
    
	position: absolute;
    animation: loader 2s;
    -webkit-animation: loader 2s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
	bottom: 0px;
    
	margin-left: 0;
}

@keyframes loader {
    0% {width: 0%;left:0;right:0}
    50% { width: 100%;left:0;right:0} 
    99% { width: 0%;left:100%;right:0} 
}

@-webkit-keyframes loader {
    0% {width: 0%;left:0;right:0}
    50% { width: 100%;left:0;right:0} 
    99% { width: 0%;left:100%;right:0} 
}

<div></div>

这篇关于CSS3关键帧进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！