Анимируйте некоторые буквы, исчезающие из слова, а затем остальные буквы перемещаются вместе, чтобы заполнить пустые пространства.

Question

Если бы слово CANDY, буквы A и D исчезли бы, а затем остальные буквы C, N, Y будут перемещаться вместе и заполнять пробелы, чтобы читать CNY вместо CN Y.

Я не уверен, что вы можете сделать это только с помощью CSS3, или если вам нужно использовать JavaScript, но все в порядке. Я также хочу, чтобы анимация зацикливалась бесконечно, с возвращением CNY в CANDY.

Answer 1

Определите класс с анимацией, применяемой к символам, которые будут исчезать и выходить. Анимация одновременно изменяется на ширину до 0, а непрозрачность - на 0.

Я также хочу, чтобы анимация проходила бесконечно, с возвращением CNY в CANDY.

Вот что такое animation-iteration-count: infinite и animation-direction: alternate.

.fade { 
 
    animation-name: fade; 
 
    animation-duration: 3s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    display: inline-block; 
 
} 
 

 
@keyframes fade { 
 
    from { width: 1em; opacity: 1; } 
 
    to { width: 0px; opacity: 0; } 
 
}

C<span class="fade">A</span>N<span class="fade">D</span>Y

Answer 2

Я не думаю, что это хороший кандидат CSS. Я бы сделал серию из <span> или <div> поплавкового блока: слева, каждая из которых содержала одну букву и складывала каждый из этих div или интервалов в массиве javascript. Затем, вероятно, используйте jQuery для запуска альфа-анимации на буквы, которые вы хотите удалить, - вы не можете использовать fadeOut, потому что, как только они станут невидимыми, float, вероятно, больше не будет работать. Используйте обратный вызов ко второму движению, который перемещает буквы, оставшиеся один символ, когда один из них слева в массиве закончен, и затем удаляет этот символ из массива.