Ego One - Pure | Fresh | First
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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]

Jalokim

Jalokim
Manager
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.


Warning
This is ONLY css3
Warning
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?




Frankenstein

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

Amazing!

Kryptonian

Post 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> <div id="Forumactif_Video"></div> <script type="application/javascript"> //<![CDATA[ var slmadshb = slmadshb || {}; slmadshb.que = slmadshb.que || []; slmadshb.que.push(function() { slmadshb.display("Forumactif_Video"); }); //]]> </script> <script type="text/javascript">window._taboola = window._taboola || []; _taboola.push({flush: true});</script></body></html><strong><a href="http://www.create-a-forum.com" target="_blank">Create a forum</a></strong>&nbsp;|&nbsp;<strong><a href="https://www.forumotion.com/directory/computers-and-internet" target="_blank">Computers and Internet</a></strong> | <strong><a href="https://www.forumotion.com/directory/computers-and-internet/computers" target="_blank">Computers</a></strong>&nbsp;|&nbsp;<span class="gensmall">&copy;</span><a href="https://www.forumotion.com/phpbb" target="_blank">phpBB</a>&nbsp;|&nbsp;<a name="bottom" href="https://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