Question

当你看到小提琴时，你会看到动画有些跳跃。它应该从左到右到100％宽度，然后在右侧挤回到0％宽度。如何解决？

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;} 
}

Answer 1

我在玩耍时想出了这个。不完全是你想要的（在第二个代码片段中），但它产生了一个整洁的小效果。

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

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% {left: 0px;}
    99% { left: 100%;} 
}

@-webkit-keyframes loader {
    0% {width: 0%;right: 100%;}
    50% { width: 100%;} 
    99% { width: 0%; right:0;} 
}

<div></div>

这与您尝试为未定义任何起始值的属性（right）设置动画的事实有关（以及处理left和right值的方式在position: absolute元素上）。它变得复杂了。最简单的方法是始终使加载器的宽度为100％，只需使用变换即可正确显示：

div { 
    overflow:hidden;
    position: absolute;
    bottom:0; left:0; right:0;
    height: 4px;
}

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;
    left:0; width:100%;
	margin-left: 0;
}

@-webkit-keyframes loader {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(100%);} 
}

<div></div>

Answer 2

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

@-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关键帧进度条

2 个答案: