CSS3 journal for web developer

CSS3 journal - css3 news with tricks & tips

[css3journal]

CSS Animations and Transitions

CSS animations are finally available in all major browsers, even in IE (since version 10). There are two ways to create CSS animations. The first is very easy, it is done through animating the changes of CSS properties with the transition declaration. With transitions, you can create hover or mouse down effects, or you can trigger the animation by changing the style of an element with JavaScript. You can see the transition below by hovering over the planet – this will cause the rocket to close in.

The second way for defining animations is a bit more complicated – it involves the description of specific moments of the animation with the @keyframe rule. This allows you to have repeating animations that don’t depend on user actions or JavaScript to get triggered.

Animation Generator: http://www.css3easy.com/css-animation/

Transition Generator: http://www.css3easy.com/css-transition/

[css3journal]

CSS3 news

If you are like me, when you see an impressive demo of a new CSS3 feature, you can’t wait to start using it in websites. Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. I have good news for you – with the latest browser releases, there are a few awesome features that are finally supported everywhere, and you can start using them right now!

A word of caution – most of these features will not work in older versions of IE (9 and below). If these browsers are a large portion of your demographic, I am afraid that you will have to rely on fallbacks. But for the rest of us, here is what modern browsers have to offer: http://www.css3easy.com/