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动画平滑变宽

回答

相关问题