Continue to your download.
Start Interactive Ad Now
Thanks for watching.
PE: CSS3 101 - Transition AnimationsTable of ContentsThis article has four main topics:Transition-property |Transition-duration |Transition-timing-function |Transition-delay |Legend: - Works in dA for All Members - Doesn't work in dA for Premium Members- Works in dA for Alpha Testers at devBUGWhat is a Transition?This time, I'll explain with an example. Let's take this awesome emote by jahw.When I see that emote, I'm imagining it saying "CHAAAARGE!" and running forward! So I want to make the emote do that, but instead of opening it up in Photoshop to animate (which I'm not allowed to do anyway since it's not my work), I'm just going to add a simple code that will do the animation for me! Hover over the emote below to see this magic in action!:thumb2
Animation Test in journalOkay, so if you hover your cursor on my logo below you can find some nice transition effects on them. Well, it is not really CSS3 transitions! It is faked by CSS2 (dA's current available CSS stuff ). I found this from here Transition-effect-without-CSS3 by Fli-cSo, used his trick and tried to find out if something more can be done on it. It is quite handy but it has got limitations (ofcourse!)1) You can't use the transition without inserting a thumbnail code in the main journal2) You can't isolate the class (q) from the lit thumb to use it in any given element.But anyways, animations are animations... Below are just roughly good animations. But something way better can be done as well. I'll be making an actual journal skin using this trick which will be much more appealing to eyes! Regards,Sid