CSS3 Animations with special effects(minimamente.com)

89 pointsby Spiritusvor 13 Jahren17 comments

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

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

11 comments

joeblauvor 13 Jahren

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

morganwildevor 13 Jahren

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

altrego99vor 13 Jahren

Core temperature in Celcius. Maximum and current.

bbxvor 13 Jahren

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.

morganwildevor 13 Jahren

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?

iziettovor 13 Jahren

IE >= 10

cuu508vor 13 Jahren

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

shiibavor 13 Jahren

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

suyashvor 13 Jahren

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

mrcolesvor 13 Jahren

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

mrcolesvor 13 Jahren

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

ender7vor 13 Jahren

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.

zhenjlvor 13 Jahren

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

CountHackulusvor 13 Jahren

And yet the CSS animation performance bug persists in iOS7.

ger_phpmagazinvor 13 Jahren

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

acoleman616vor 13 Jahren

iOS7-inspired background?

Spiritusvor 13 Jahren

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