CSS морфинг слово / текст

Question

Есть ли способ изменить текст заголовка от одного слова к другому, сохранив буквы, используемые в обоих словах?Многие из анимаций текста CSS, которые я смотрел, в основном визуальные, и есть несколько, которые вращают целые слова.

Что я хочу сделать, так это перейти от слова, например, «ПЛЯЖ» к «ИЗМЕНЕНИЕ», где некоторые буквы исчезнут, а другие перегруппируются.

Я знаю, что это может быть сделано в After Effects и может быть сделано с использованием спин / ключевых кадров, но это не гладко и не слишком затянуто.

Любая помощь или, если есть подобные проекты, которые могут быть реализованы, будет принята с благодарностью.

Answer 1

вот еще один пример для вас, который включает в себя несколько javascript http://jsfiddle.net/29wtdj0e/12/

, которые просто меняют значения внутри функции letsgo('BEACH','CHANGE').

имеет 2 цикла, по 1 для каждого слова.первый цикл создает новые элементы для букв, не входящих в 1-е слово, и анимирует его.Первый цикл также проверяет наличие существующих букв и анимирует их напрямую.

Второй цикл просто скрывает буквы из первого слова, которые не нужны.

Answer 2

Я сделал для вас образец, может быть, не совсем то, что вам нужно, но вы можете улучшить его здесь: https://jsfiddle.net/0gkt8qw6/4/

То, как я это делаю, - это обрабатывать каждую букву как один элемент, какпоэтому

HTML

<div class="word first-form">
  <div class="letter letter-b">B</div>
  <div class="letter letter-c">C</div>
  <div class="letter letter-h">H</div>
  <div class="letter letter-a">A</div>
  <div class="letter letter-n">N</div>
  <div class="letter letter-g">G</div>
  <div class="letter letter-e">E</div>
</div>

Затем я перемещаю каждого персонажа с помощью transform: translateX ().Обратите внимание, что я сделал каждую букву одинаковой ширины, т.е. 58px.Это позволяет мне анимировать перевод с использованием процентов.Помните об этом, если вы используете специальный вид шрифта.

Надеюсь, это поможет!