Create slick HTML5 animations | Tutorial

 Education, Web Design  Add comments
Sep 162013
 

CSS3_logo

In 2013, it’s time to sit back and relax. Modern browsers have several dedicated animation technologies built in, which run at 60 fps. Now is the time to forget about the past and start building UI experiences with tasteful animations that help the user feel at home. I would like to take you on a guided tour of the four animation technologies the modern web has to offer to help you decide which one is right for your project.

Let’s start with the easiest to use declarative technology: CSS3. No need for JavaScript here, just plain old CSS, with a few modern tricks.

CSS can be used to declare animations using two basic properties: transition and animation. The transition property tells the browser to compute intermediate frames between two states, each defined by its own CSS. The animation is triggered when the CSS of the element changes. For example, because you programmatically changed its class or because a :hover CSS has kicked in.

MORE:  Create slick HTML5 animations | Tutorial | .net magazine.