Я хочу сделать анимацию входа и выхода, чтобы показать букву имени пользователя. Каждая буква изменяется после другой. Якорь всего слова должен быть в середине, но каждая буква должна быть там, где она будет, когда появится все слово.
Вот где я на данный момент:
HTML
<div id = "username">
<span class = "animate-username-letter" style = "animation-delay:0s, 3s">U</span>
<span class = "animate-username-letter" style = "animation-delay:0.1s, 3.1s">S</span>
<span class = "animate-username-letter" style = "animation-delay:0.2s, 3.2s">E</span>
<span class = "animate-username-letter" style = "animation-delay:0.3s, 3.3s">R</span>
<span class = "animate-username-letter" style = "animation-delay:0.4s, 3.4s">N</span>
<span class = "animate-username-letter" style = "animation-delay:0.5s, 3.5s">A</span>
<span class = "animate-username-letter" style = "animation-delay:0.6s, 3.6s">M</span>
<span class = "animate-username-letter" style = "animation-delay:0.7s, 3.7s">E</span>
</div>
CSS
#username {
text-align: center;
}
.animate-username-letter {
font-family: Tahoma;
display: inline-block;
white-space: nowrap;
font-size: 50px;
animation: forwards;
animation-name: animate-username-in, animate-username-out;
animation-delay: 2s, 6s;
animation-duration: 0.10s;
}
@keyframes animate-username-in {
from {
font-size: 0px;
}
to {
font-size: 50px;
}
}
@keyframes animate-username-out {
from {
font-size: 50px;
}
to {
font-size: 0px;
}
}
JSFIDDLE
https://jsfiddle.net/zc5u1tmk/2/
Поскольку слово расположено по центру и все буквы расположены между собой, мы можем видеть движение букв от центра влево и наоборот, когда слово исчезает. Как сделать так, чтобы этого не произошло? Я пытался использовать фиксированную ширину, но это невозможно, так как некоторые буквы шире, чем другие, и они будут перекрываться или создавать промежутки между буквами.
Красным цветом слово перед ним исчезает, а черным воспроизводится анимация. Это то, чего я смог достичь и чего я пытаюсь достичь.
Я думал об этом, но нет
Может быть, решение состоит в том, чтобы обернуть каждую букву одной и той же буквой с прозрачностью и без анимации, а затем перекрыть родителя дочерним элементом?
Анимируйте scale
вместо font-size
#username {
text-align: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-end;
}
.animate-username-letter {
font-family: Tahoma;
display: inline-block;
white-space: nowrap;
font-size: 50px;
animation: forwards;
animation-name: animate-username-in, animate-username-out;
animation-delay: 2s, 6s;
animation-duration: 0.50s;
text-align: center;
transform: scale(0);
transform-origin: bottom;
}
@keyframes animate-username-in {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes animate-username-out {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}
<div id = "username">
<span class = "animate-username-letter" style = "animation-delay:0s, 3s">U</span>
<span class = "animate-username-letter" style = "animation-delay:0.1s, 3.1s">S</span>
<span class = "animate-username-letter" style = "animation-delay:0.2s, 3.2s">E</span>
<span class = "animate-username-letter" style = "animation-delay:0.3s, 3.3s">R</span>
<span class = "animate-username-letter" style = "animation-delay:0.4s, 3.4s">N</span>
<span class = "animate-username-letter" style = "animation-delay:0.5s, 3.5s">A</span>
<span class = "animate-username-letter" style = "animation-delay:0.6s, 3.6s">M</span>
<span class = "animate-username-letter" style = "animation-delay:0.7s, 3.7s">E</span>
</div>
Использование фиксированной ширины приведет к пробелам или перекрытиям, поскольку я не использую моноширинный шрифт.
Обновил код и анимировал масштаб шрифтов и вместо этого установил размер шрифта.
Удивительно ! Вы даже добавили нижний слой трансформации, который мне был нужен. Большое спасибо !
Считаете ли вы моноширинный шрифт?