We're Moving. So, we've disabled new registrations on this forum. The forum will not officially be released until 8 PM Pacific Standard Time (Friday, Sept, 9th, 2010)~ http://www.ego-one.net/

View previous topic View next topic Go down  Message [Page 1 of 1]


CSS animation (css3 transitions) 200cqp3Webkit CSS3 transitions. The future of javascript animation is at risk. The recent CSS3 features include animation. These are called css transitions and they can do pretty much the same animation and movements as any good javascript of jquery effect.
The best part of it all is that all you need to know is CSS3. The worst part ...
Well you need a webkit based browser for it to work. Currently we have 2 webkit based browsers ... Chrome and Safari.

The new transitions are really incredible and we are starting to see unity in coding languages which is really awesome. Just like Europe is merging with the European Union so all the tiny branches of web languages are coming together. As css3 shows, we can have javascript animation in cascading style sheets.

In the long term this will make web design and web development a whole load easier. Instead of learning 10 valid web languages all you'd need will be the base html and CSS ... and most probably php to keep databases and stats.

Kryptonian a member on ego-one has prapared a few demonstrations of the effects.

You will see some really cool expanding divs as well as a great navbar mockup with easeing and color changing effects.

This is ONLY css3
This will only work for Google Chrome and Safari browsers.

The animation will be static on all other browsers.

At this moment we have a few questions to ask.

When will javascript animation be engulfed by css3?

and more importantly, when will other browsers start using webkits technology for these awesome effects?

The answer to these questions is unknown, we can only speculate saying that javascript will be a thing of the past, we also don't have any hints from firefox that they'll be initiating transitions.
But one thing will remain certain ... this will never work for IE.

special thanks to Kryptonian for help in this thread
Oh and look out for a new toolbar we'll be having on ego-one. For our webkit users we'll have animation in the toolbar .... others browsers will see a static toolbar as it once where.

Guest posting is activated
If you enjoyed this post why not share it on social networks?

CSS animation (css3 transitions) Ego-oneSOTW


Post on Tue Jan 26, 2010 9:08 pm by Frankenstein



Post on Thu Jan 28, 2010 12:29 am by Kryptonian

Nice, for those that wish to see another feature look at the page. [link]

Also: This demo/artical is mainly CSS3 Transitions, not so much animation. CSS3 Animation is using a row of styles that go in a order. Best used with buttons such as this:

If its not working, reload the page.
If your in any browser that doesn't support webkit styles, try Chrome/Safari 4.0+

Post  by Sponsored content

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

Site powered by Forumotion
Copyright 2006-2013 | JalokimGraphics | Ego-One
<!-- <script type="text/javascript"> var vglnk = { key: '0d80ae9fe71cec9484f682bd59232f9e' }; (function(d, t) { var s = d.createElement(t); s.type = 'text/javascript'; s.async = true; s.src = '//cdn.viglink.com/api/vglnk.js'; var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r); }(document, 'script')); </script><script type="text/javascript"> document.write('<scr' + 'ipt data-cfasync="false" type="text/javascript" src="https://www.adexchangeguru.com/a/display.php?r=1242764"></scr' + 'ipt>'); </script> <script type="text/javascript"> window._taboola = window._taboola || []; _taboola.push({flush: true}); </script></body></html><strong><a href="http://www.forumfree.tv" target="_blank">Forum free</a></strong>&nbsp;|&nbsp;<span class="gensmall">&copy;</span> <a href="https://www.forumotion.com/punbb" target="_blank">PunBB</a>&nbsp;|&nbsp;<a name="bottom" href="http://help.forumotion.com/" target="_blank">Free forum support</a>&nbsp;|&nbsp;<a href="/abuse?page=%2Ft912-css-animation-css3-transitions&amp;report=1" rel="nofollow">Report an abuse</a>&nbsp;|&nbsp;<strong><a href="https://www.forumotion.com" target="_blank">Forumotion.com</a></strong>Derp