动画步骤之间的平滑过渡

我想创建一个完整的CSS动画进度条，使用steps()来结束。动画步骤之间的平滑过渡

@keyframes loading { 
    0% { 
    width: 0%; 
    left: 50%; 
    } 
    100% { 
    width: 100%; 
    left: 0%; 
    } 
} 
div { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 0%; 
    height: 1px; 
    background-color: #000; 
    -webkit-animation: loading 15s steps(15, end); 
    animation: loading 15s steps(15, end); 
    transition: all 0.5s ease-out; 
}

我的主要目标是保持steps()并添加transition效果使其平滑。
我怎么能达到没有JS？

来源

2016-10-20 PaulCo

你不能，很遗憾。在我看来，在这种情况下你根本不需要“步骤”，更像是一个更复杂的动画。与*暂停* –

将很乐意看到一个例子*暂停*！ – PaulCo

当然...在这里你走了。 –

我认为这是你以后的样子。

我已经简化了这5个职位...... 15个阶段的数学虽然很简单。

@keyframes loading { 
 
    0% { 
 
    width: 0%; 
 
    } 
 
    25% { 
 
    width: 25%; 
 
    } 
 
    50% { 
 
    width: 50%; 
 
    } 
 
    75% { 
 
    width: 75%; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
} 
 
div { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 0%; 
 
    height: 10px; 
 
    background-color: #000; 
 
    animation: loading 5s infinite; 
 
}

<div></div>

来源

2016-10-20 10:08:51

我第一次不想使用这种技术来处理大量的关键帧涉及，但现在我写在JS我想我要摆脱'setTimeOut（）'！谢谢 – PaulCo

动画步骤之间的平滑过渡

回答

相关问题