Animation in Web Design

Collection of great UI animations

found and shared by clexit

share: facebook twitter google+

Theory

12 Principles of Animation from Justin Zhou on Vimeo.

Practice

MAC OS X interface animation

Sneak Peek UI by Zach Roszczewski

Dropdown Menu Animation by Jeremey Fleischer

Button by Andrey Maxim

Home Page Project by Agence Me

Retired Project - Tour by Agence Me

iPhone Retina Navbar Animation by Jeff Broderick

Animated Twitter Button by Edgar

Stats Animated! by Rally Interactive (via Ben Cline)

Sidebar animation by Jakub Antalík

Animated UI [.AE giveaway] by Fabio Basile

Ui8 Mobile Preview by Dash

App loader by Peter Had

Win point by Agence Me

Animated Upload Avatar UX by Miguel Oliva Márquez

iOS 6 beta 2 Software Update Animation

Link: Matthew Farag's portfolio animation

Link: Sign In button animation

Link: Book cover animation

Book cover animation CSS

-webkit-transition: all 0.25s ease;
-moz-transition   : all 0.25s ease;
-ms-transition    : all 0.25s ease;
-o-transition     : all 0.25s ease;
transition        : all 0.25s ease;
 
-webkit-transform-origin: left bottom;
-moz-transform-origin   : left bottom;
-ms-transform-origin    : left bottom;
-o-transform-origin     : left bottom;
transform-origin        : left bottom;
 
-webkit-transform: skewY(-3deg) scaleX(0.98);
-moz-transform   : skewY(-3deg) scaleX(0.98);
-ms-transform    : skewY(-3deg) scaleX(0.98);
-o-transform     : skewY(-3deg) scaleX(0.98);
transform        : skewY(-3deg) scaleX(0.98);

fin.

share: facebook twitter google+