CSS3 animation

Hi Guys,

Tell me about the types css3 animation.

 

Tell me about what you want to know, or dig through the 3.7 million hits on Google for the very broad generality you think can be covered in a forum.

 

Look at Google : About 5,620,000 results, there is a bunch of tutorials and definition of CSS3 animation.
If you will get a stuff that you don't understand, then come back, ask and we will give an answer.

Good Reading and Goodluck

 

Ok, bro thanks for replying.

 

Have a wee look at CSS3 Animate It, great little plugin for CSS3 Animations as they come into view http://css3-animate-it.jackonthe.net/

 

CSS3 has six types of the animation properties.
animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction

 

you have milions of articles around the internet with the demos here is one http://webdesignerwall.com/trends/47-amazing-css3-animation-demos I Love GOOGLE before learning animations try learning the base of css padding margin the first steps.

 

Why do I get the feeling this is heading towards adding yet another empty site with nothing but "cool" effects that ends up abandoned and unmaintained from a novice who has started at the wrong end of the learning curve?

 

there are huge resource on the net about CSS3 animation. check out one by one...

 

Personally I only use the transition effect. That one is nice for buttons and such. For other stuff just stick to javascript. I think too much css animations is not very multi platform.

 

Javascript animations use about three times the energy of CSS animations. That means the battery of mobile devices or even unplugged laptopsa get drained faster by the less efficient scripted solutions.

 

Fair point. Still I somewhat feel with CSS animations, lots of older devices and browsers go crazy.
In general animations are not use-abilities best friend.

 

I agree that animations are often overdone, and on mobile I think it is stupid to use them, but if you are going to use animations (and especially transitions) CSS is a better option and old browsers that are not up for animations simply ignore the rule declarations and it is as if they don't exist.

 

... and that's really the best approach for most fancy CSS3 effects -- users of old browsers don't get rounded corners, drop shadows and animated nonsense, OH FREAKING WELL. Does the page still work? Can they get to the content? If the answer is yes then who gives a flying purple fish, they should be thankful we bother supporting them at all with their decade or more out of date software!

... and throwing scripted polyfills at it isn't the answer.

Animations on sites, particularly CSS transitions can be of benefit if they enhance the usability of the page. An opacity fade-in and fade-out with a delay on the 'hide' part of the transition for example can make flyout menus easier to use if you're not the best at moving the mouse around. Having visual queues when something like an AJAX submit or load is being done can be a great help, and animating them to draw the users attention to the fact something is going on is even better; keyframe animations rock for this.

But as said, it can really be overdone. Like a great number of other web technologies (javascript for example) you are usually best off using it with an eye-dropper not a paint roller.

The laugh though is when people try to use all this stuff to recreate behaviors that we've been told are bad. People are more prone to think the tech is the problem, not the result. See the halfwits who use JavaScript to replicate "TARGET" as target is deprecated on non-frameset pages... or all the people trying to replicate non-game non-media delivery flash using HTML 5. The problem wasn't the target attribute or Flash, the problem was what people were doing with it; shoving new windows down people's throats whether they like it or not, and annoying bandwidth wasting animated nonsense that adds nothing of value to the page.

Really though that's web technologies in a nutshell -- for the most parts they have legitimate uses, but people over-use them attempting to be 'flashy' and 'cool', with the end result being more likely to drive users away from a site than it is to do what's actually important -- drive users to your content and keep them coming back!

See 99.99% of websites that started their lives as PSD's, 99.99% of sites people slap jQuery-tardery on for no good reason, and 99.99% of "media heavy" pages where said media isn't actually the content.

 

I hate when people say " Google ". Though it is a nice practice, that is literally redirecting visitors to other website. Instead It will be better to try to help the users by asking him what exactly he would like to know.