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
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!
EDIT
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
source to share
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>
</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
source to share
The same can be done by changing the InnerHTML onMouseover () value in Js.
<body>
<script type=text/javascript>
function changetext()
{
document.getElementById("change").innerHTML='<p>Cascading Style Sheets<p>'
}
</script>
<div id="change" onmouseover="changetext();">css</div>
</body>
But I don't think it is possible to change the text in css3. We can add transition effects to make it look good.
source to share
http://www.designscripting.com/webtools/css3/generator/
CSS3 Transition Generator.
source to share