CSS動畫平滑變寬

-1

我想知道如何在CSS和anime.js中製作類似THIS GIF的東西。我希望它是平滑的，從一個只有輔音的單詞開始，然後順利地打開空間以允許一個元音出現，一次（或全部）。CSS動畫平滑變寬

線索是這個詞是居中，沒有mattre多久或包含多少個字母。當你添加一個字母（帶有動畫）時，它應該保持居中並平滑地打開空間以淡入下一個字母。

我不是專家，我甚至不知道如何開始這個。除了每次分別移動每個字母1像素，但這將是工作小時，不能重複使用的其他字（例如i小於w或s）

這是甚至可能在CSS？感謝您的意見或建議。

2017-07-26 nclsvh

爲什麼downvote而不讓我知道爲什麼？這對任何人都沒有幫助.. – nclsvh

可能是因爲你沒有給我們任何線索，你已經嘗試過。你不必是專家就可以開始做這件事，但是在你問及是否有可能的事情之前，你需要努力做出努力。如果您不向我們提供代碼（最好在您的答案中的代碼段中），我們也無法幫助您調試您的努力，也不是代碼編寫服務。閱讀[如何創建一個MCVE]（https://stackoverflow.com/help/mcve）瞭解更多信息。（注意：如果你想知道，我不是downvoter）。 – chazsolo

@chazsolo事情是我不知道如何開始，即使絲毫沒有，除了像素的像素。無論如何謝謝 – nclsvh

如果您對固定空格字母感到滿意，那麼您可以在純CSS中使用它：fiddle。

<p> 
    <span>N</span> 
    <span class="vowel">i</span> 
    <span>c</span> 
    <span class="vowel">o</span> 
    <span>l</span> 
    <span class="vowel">a</span> 
    <span>s</span> 
</p> 
<style> 
    p span { 
    display:inline-block; 
    width:0.7em; 
    text-align:center; 
    } 

    .vowel { 
    opacity:0; 
    width:0em; 
    animation:enter 0.6s 0.4s forwards; 
    } 
    .vowel ~ .vowel { 
    animation-delay:0.6s; 
    } 
    .vowel ~ .vowel ~ .vowel { 
    animation-delay:0.9s; 
    } 

    @keyframes enter { 
    0% { width:0; opacity:0; } 
    49% {opacity:0;} 
    50% {opacity:1;} 
    100% { width:0.7em; opacity:1;} 
    } 
</style>

來源

2017-07-26 16:41:17 Xander

感謝您的意見。我想玩這個小提琴找到固定寬度的解決方案！這是一個很好的開始 – nclsvh

CSS動畫平滑變寬

回答

相關問題