0 votes
by (250 points)
I should probably preface this by pointing out that the root of my problem is almost certainly my minimal understanding of html and css - I just started learning about a week ago.

Anyway, I've been playing around with different looks and styles, and I ran across the amazing CSS animations at https://daneden.github.io/animate.css/ - I figured "Hey, some of those are pretty nifty! Let's add them!".

Well... obviously it's turned out to be more complicated than I'd imagined.  I haven't been able to figure out how to call an animation with any combination of (@@.CSSname;) - my guess is I just don't know the proper syntax and I haven't been able to find anything by searching online.

That said, I did manage to get it working in some instances by wrapping it with html and giving it the class I wanted (for example, class="animated infinite bounce").  The problem is, this only seems to work with block tags - p, div, etc. - which obviously break the current line.  If I try calling the animation with span, nothing.  If I try forcing display:inline with the block tags, it breaks the animation.

I know I meandered a bit there, but my question is this: If I wanted to put a sentence in my story, say "The quick brown fox jumps over the lazy dog.", and I want the word 'jumps' to bounce, is there a way to do this with those animations without breaking the line?

I'm assuming that either A) The answer is very simple and I've just overlooked it, B) It's not possible and I'm beating my head against a wall here, or C) My computer is haunted.


Thanks in advance

1 Answer

+1 vote
by (63.1k points)
It's usually best to include the exact code you tried so we don't have to sit here and guess at the problem. In this case, however, the problem isn't too complicated. Most of the animations you're using rely on transformations and you can't use these on inline elements. Use inline-block instead.
by (250 points)
Thank you so much!

As predicted, a very simple solution that I'm just not experienced enough to have figured out on my own.  I put the inline-block solution in my stylesheet, and it worked perfectly.

Much appreciated!