CSS3 for lovely image loading effects

Infinite page loading with CSS3 Transition

Would you get inspired for loading effects of grid items using CSS3 Transition and Animation?

The tympanus.net/codrops [2] shows a animated loading for grid elements example. The exposed examples use CSS3 Transition for the animation. Javascript is only used to detect the page states and scroll events.

Codrops - Playground

One very nice example is the 'Fly' example. The grid or image elements fly from a background origion with 180 degree around the x-axis to there home position.

Playground: Page loading effects for grid items on tympanus.net/codrops [3]


Use and add different Transform attributs for building animated effects.

Example 5 'Fly' [1]

.grid.effect-5 li.animate {
	transform-style: preserve-3d;
	transform-origin: 50% 50% -300px;
	transform: rotateX(-180deg);
	animation: fly .8s ease-in-out forwards;
@keyframes fly {
	100% { transform: rotateX(0deg); opacity: 1; }

[1] Lovely rotate on x-axis example 5 'Fly': http://tympanus.net/Development/GridLoadingEffects/index5.html
[2] Codrops page: http://tympanus.net/codrops/
[3] Codrops - Loading effects: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

© Kometschuh.de | Impressum | GitHub | Facebook |