Animation through css3 transition

I need to create an animation that is trigerred when the cursor hovers over it. Animation is an acronym that expands to full shape, for example when I hover "CSS3". it should expand to a "cascading style sheet" with ascending "C" and "S" with letters coming one after the other, will this only be possible through CSS3? (Editor's note, I suppose it means that as new letters are typed and then just appear right away)


source to share

5 answers

You can most likely do it with CSS 3.

Here's the tip I made:

Js Fiddle (Hover over word CSS to see effect)

This can be done with some classes and just covers. For simplicity, I just used P-Tag and Span internally.

Hope this helps!


Try adjusting the animation speed to get a different effect. You should also be able to set different timings for the effects (color, text-indent) so that the font becomes visible when the text-indent is over



If you are trying to do what I think you are trying to do, then it cannot be done with CSS, otherwise there will probably be a lot of funny rules.

If you're using flash, just use a movie clip and some Action Script to trigger the animation.

However, I believe that you are actually using HTML / CSS / JS (web browser stuff), in which case you will need to use some kind of JavaScript. I suggest you take a look at JQuery, a beautiful library that will make it very easy to detect the hover effect and then manipulate what it says.

You probably need something like ...

<span class="ExpandingAbreviation">
    <span class="short">CSS3</span>
    <span class="Long">cascading style shet</span>


Then in your stylesheet make it Long hidden and through jQuery you will need to set up a listener for hover events and write code to hide it and show it for a long time. Although, I'm not too sure what effect you have after



The same can be done by changing the InnerHTML onMouseover () value in Js.

<script type=text/javascript>
function changetext()
document.getElementById("change").innerHTML='<p>Cascading Style Sheets<p>'
<div id="change" onmouseover="changetext();">css</div>


But I don't think it is possible to change the text in css3. We can add transition effects to make it look good.





I created a jsfiddle that does what you like. I think this is the easiest way to understand what's going on. All you need for this function is jQuery. Just click "CSS" to try it out.



All Articles