CODEWITHSUNDEEP
javascriptcss
user5601156
user5601156

Reputation:

Animate certain letters disappearing from a word, and then the rest of the letters moving together to fill the empty spaces

If the word were CANDY, the letters A and D would fade out, and then the remaining letters C, N, Y would move together and fill the spaces to read CNY instead of C N Y.

I'm not sure if you can do this with just CSS3 or if you have to use JavaScript, but either is fine. I also want the animation to loop infinitely, with CNY turning back into CANDY.

Upvotes: 0

Views: 408

Answers (2)

joshstrike
joshstrike

Reputation: 1823

I don't think this is a good CSS candidate. I'd make a series of <span> or a <div> display-block float:left, each containing one letter, and stack each of those divs or spans in a javascript array. Then probably use jQuery to run an alpha tween on the letters you want to remove -- you can't use fadeOut because once they become invisible, the float probably won't work anymore. Use a callback to a second tween that moves the letters one character left whenever one to the left of it in the array is finished fading out, then remove that character from the array.

Upvotes: 0

user663031
user663031

Reputation:

Define a class with an animation to apply to the characters to be faded in and out. The animation simultaneously changes to width to 0, and the opacity to 0.

I also want the animation to loop infinitely, with CNY turning back into CANDY.

That's what animation-iteration-count: infinite and animation-direction: alternate do.

.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

Upvotes: 1

Related Questions