動畫步驟之間的平滑過渡

我想創建一個完整的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

動畫步驟之間的平滑過渡

回答

相關問題