CSS3-Animationen im Zusammenspiel mit Javascript

CSS3-Animationen im Zusammenspiel mit Javascript

 

 

 

Box-Animationen

 

Sie werden beim Scrollen nach unten orangefarbene Boxen sehen,

die beim Erscheinen animiert eingeblendet werden.

Links daneben steht der Name des Animationseffekts.

 

 

 

 

 

 

 

hüpft aus dem Hintergrund nach vorne (bounceIn) :

hüpft von oben ein (bounceInDown) :

hüpft von rechts ein (bounceInRight) :

hüpft von unten ein (bounceInUp) :

hüpft von links ein (bounceInLeft) :

blendet sich kurz von oben nach unten ein (fadeInDownShort) :

blendet sich kurz von unten nach oben ein (fadeInUpShort) :

blendet sich kurz von links ein (fadeInLeftShort) :

blendet sich kurz von rechts ein (fadeInRightShort) :

blendet sich von oben ein (fadeInDown) :

blendet sich von unten ein (fadeInUp) :

blendet sich von links ein (fadeInLeft) :

blendet sich von rechts ein (fadeInRight) :

blendet sich von hinten ein (fadeIn) :

wächst von hinten klein nach vorne groß (growIn) :

wackelt horizontal (shake) :

wackelt vertikal (shakeUp) :

dreht sich um die eigene Achse (rotateIn) :

wird von unten links aus in Bild gedreht (rotateInUpLeft) :

wird von unten rechts aus in Bild gedreht (rotateInDownLeft) :

rotateInUpRight :

rotateInDownRight :

rollt sich von links ins Bild (rollIn) :

wackelt als Parallelogram ins Bild (wiggle) :

schwingt sich wie am Bilderhaken ein (swing) :

tada :

wobble :

pulse :

lightSpeedInRight :

lightSpeedInLeft :

flip :

flipInX :

flipInY :

Mit Klick umschalten

Es klappt auch mit einem Klick.

Klicki