CSS3 Animations with special effects

http://www.minimamente.com/magic-css3-animations/

by Spiritus • 13 years ago

89 17 13 years ago

minimamente.com

Repository: https://github.com/miniMAC/magic

Spiritus• 13 years ago

Repository: https://github.com/miniMAC/magic

morganwilde2• 13 years ago

Awesome stuff, the fluidness of those animations versus something made with jQuery is astonishing. I wonder what kind of compatibility would this have with older browsers?

izietto• 13 years ago

IE >= 10

cuu508• 13 years ago

More like this: Animate.css http://daneden.me/animate/

shiiba• 13 years ago

Animate.css is great. But magic.css is very simple and small that means editable.

suyash• 13 years ago

Animate.CSS has more animations than magic.css and in my opinion is better.

acoleman616• 13 years ago

iOS7-inspired background?

bbx• 13 years ago

I've written CSS for years and only recently started implementing some animations in my designs. I was worried at first when browsers started implementing it, fearing useless and insipid animations would sprawl around the web (like some jQuery ones). But like anything, if used sparingly, animations can improve an interface. Apart from adding life and being "cool" (probably the reason why designers implement them in the first place), animations add interactivity and affordance. Plus, they're less prone to bugs because the code is easier to read and write than jQuery alternatives, and the browsers' rendering engine usually prevents unwanted fluttering and infinite loops from happening.

ger_phpmagazin• 13 years ago

While technically interesting, I find those animations highly annoying as they are.

CountHackulus• 13 years ago

And yet the CSS animation performance bug persists in iOS7.

mrcoles2• 13 years ago

Pretty fun—the perspective down animation inspired me to make css3 animated jacobs ladder: http://mrcoles.com/demo/jacobs-css3-ladder/

mrcoles2• 13 years ago

and the source code: https://github.com/mrcoles/jacobs-css3-ladder

joeblau• 13 years ago

What freaked me out about this site is that I have the OSX Mavericks wave as my background and the gradient transition on the site is the exact same color scheme[1].

[1] http://i.imgur.com/QCyUUVd.jpg

morganwilde2• 13 years ago

What's displayed on the left side of your desktop?

altrego99• 13 years ago

Core temperature in Celcius. Maximum and current.

ender7• 13 years ago

The key to many of these effects is to animate both the transform and the position of the transform-origin simultaneously. Done correctly, it can give the animation a sinuous behavior that makes it much more interesting to look at.

zhenjl• 13 years ago

This is cool. Anyone know what type of license this has? I can't find it on github or the site.

CSS3 Animations with special effects

Related Stories