одновременно плавно переупорядочивать и создавать новые сегменты слов при зависании

Question

Я хочу поместить заголовок над страницей, которая (гипотетически) говорит: DUKE YAHA
При наведении, я хочу, чтобы текст плавно переходил (фактически с использованием перехода CSS3, а не просто мгновенно меняется) на: ARCH DUKE MAN AY HA TON

Итак, что будет добавлено в ARCH и MAN до и после того, как DUKE; а в YAHA - переключатель Y и A, после чего добавляется TON. Итак, две вещи:

1. слова добавлены;
2. буквы переключены вокруг

То, что я хотел бы добиться того, что DUKE движется влево, чтобы освободить место для ARCH и MAN вокруг него; и что вы видите буквы Y и A в YAHA, фактически переключают места.

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

Например, для этого нужно взглянуть на jQuery, а не на CSS3 (который я пытался, но не повезло)? И нужно ли использовать CSS3-анимацию, кроме перехода CSS3, чтобы достичь этого?

Answer 1

Вы можете попробовать это:

$(".top").hover(function() { 
 
    $(this).find('.letters').addClass("active"); 
 
    });

.letters{ 
 
     -moz-transition: all 1.5s ease-in-out; 
 
     -webkit-transition: all 1.5s ease-in-out; 
 
     -o-transition: all 1.5s ease-in-out; 
 
     -ms-transition: all 1.5s ease-in-out; 
 
     transition: all 1.5s ease-in-out; 
 
     float: left; 
 
     position:relative ; 
 
    } 
 
    .first , .third,.seven{ 
 
     opacity: 0; 
 
    } 
 
    .top{ 
 
     left: 55%; 
 
     position: absolute; 
 
     transform: translate(-50%,-50%); 
 
     -webkit-transform: translate(-50%,-50%); 
 
     -ms-transform: translate(-50%,-50%); 
 
     width: 400px; 
 
    } 
 
    .first, .third,.seven{ 
 
     -webkit-transition-delay: 1s; 
 
     -moz-transition-delay: 1s; 
 
     -o-transition-delay: 1s; 
 
     -ms-transition-delay: 1s; 
 
     transition-delay: 1s; 
 
    } 
 
    .second{ 
 
     -webkit-transform: translate3d(35px,0px,0px); 
 
     -moz-transform: translate3d(35px,0px,0px); 
 
     -o-transform: translate3d(35px,0px,0px); 
 
     -ms-transform: translate3d(35px,0px,0px); 
 
     transform: translate3d(35px,0px,0px); 
 
     -webkit-transition-delay: 0s; 
 
     -moz-transition-delay: 0s; 
 
     -o-transition-delay: 0s; 
 
     -ms-transition-delay: 0s; 
 
     transition-delay: 0s; 
 

 
    } 
 
    
 
    .fourth{ 
 
      transform: translate3d(11px,0px,0px); 
 
      -webkit-transform: translate3d(11px,0px,0px); 
 
      -moz-transform: translate3d(11px,0px,0px); 
 
      -o-transform: translate3d(11px,0px,0px); 
 
      -ms-transform: translate3d(11px,0px,0px); 
 
      -webkit-transition-delay: 2s; 
 
      -moz-transition-delay: 2s; 
 
      -o-transition-delay: 2s; 
 
      -ms-transition-delay: 2s; 
 
      transition-delay: 2s; 
 

 
     } 
 
    .fivth{ 
 
      transform: translate3d(-10px,0px,0px); 
 
      -webkit-transform: translate3d(-10px,0px,0px); 
 
      -moz-transform: translate3d(-10px,0px,0px); 
 
      -o-transform: translate3d(-10px,0px,0px); 
 
      -ms-transform: translate3d(-10px,0px,0px); 
 
      -webkit-transition-delay: 1s; 
 
      -moz-transition-delay: 2s; 
 
      -o-transition-delay: 2s; 
 
      -ms-transition-delay: 2s; 
 
      transition-delay: 2s; 
 
     } 
 

 
    .active{ 
 
     opacity: 1; 
 
     -webkit-transform: translate3d(0px,0px,0px); 
 
     -moz-transform: translate3d(0px,0px,0px); 
 
     -o-transform: translate3d(0px,0px,0px); 
 
     -ms-transform: translate3d(0px,0px,0px); 
 
     transform: translate3d(0px,0px,0px); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="top"> 
 
     <span class="letters first">ARCH </span> 
 
     <span class="letters second"> DUKE </span> 
 
     <span class="letters third"> MAN </span> 
 
     <span class="letters">&nbsp;</span> 
 
     <span class="letters fourth">A</span> 
 
     <span class="letters fivth">Y</span> 
 
     <span class="letters six">HA</span> 
 
     <span class="letters seven">TON</span> 
 
    </div>