Анимация текста без jQuery

Question

spanWidth = $('li span').width();
$('li span').css('width', '0');

$('li').hover(
  function() {
    $('span', this).css('width', spanWidth);
  },
  function() {
    $('span', this).css('width', '0');
  }
);

/*hide the span, works together with the script*/
span {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  overflow: hidden;
  transition: all .5s;
}
/*get rid of the extra whitespace, use it as needed*/
span { 
margin-right: -4px;
}
li:hover span {
margin-right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>
    <span>FACEBOOK</span>FB
  </li>
</ul>

Возможно ли, сделать, что-то подобное на чистом CSS, либо на JS, но без jQuery? Я пытался сделать на CSS с помощью display: none; и display: inline-block; но этот вариант невозможно анимировать и получается слишком просто. Ещё при появлении span, он сдвигает FB вправо. Как спрятать FB и показать только FACEBOOK?

Answer 1

li {
  position: relative;
}

.a {
  position: absolute;
}

.b {
  opacity: 0;
}

li:hover .a {
  animation: a 200ms both;
}

@keyframes a {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

li:hover .b {
  animation: b 200ms both;
}

@keyframes b {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}

<ul>
  <li>
    <span class="a">FB</span><span class="b">FACEBOOK</span>
  </li>
</ul>

Answer 2

получается слишком просто

Если хочется по-сложнее, то может быть Вас заинтересует такой вариант:

.abbr {
  padding: 5px;
  box-shadow: 1px 2px 3px black;
  font: bold 0px/1em sans-serif;
}
.abbr:hover {
  font: bold 16px/1em sans-serif;
}

.abbr span {
  display: inline-block;
  transition: 0.5s ease;
}
.abbr span::first-letter {
  color: red;
  font: bold 16px/1em sans-serif;
}

<button class="abbr"><span>You</span><span>Tube</span></button>
<button class="abbr"><span>В</span><span>Контакте</span></button>
<button class="abbr"><span>Face</span><span>book</span></button>
<button class="abbr"><span>&ZeroWidthSpace;L</span><span>i</span><span>nkedIn</span></button>
<button class="abbr"><span>Союз&nbsp;</span><span>Советских&nbsp;</span><span>Социалистических&nbsp;</span><span>Республик</span></button>

БЛОГ НА HUSL

Анимация текста без jQuery

Ответы (2 шт):