280 + CSS3 animaciones Pack-Effect. CSS

Vista prévia

Descripción

Effect. CSS es una librería CSS pura que proporciona 280 + CSS3 Powered animación para su proyecto web moderno. Escrito en LESS y totalmente personalizable. Una gran alternativa a la < a href = "https://daneden.github.io/animate.css/" target = "_ blank" rel = "noopener noreferrer" > Animate. CSS .

Instalación

# NPM
$ npm install effectcss

# Bower
$ bower install effectcss

Funcionamiento

Incluya la versión compilada y minimizada del Effect. CSS en la página HTML.

<link href="/dist/effectweb.min.css" rel="stylesheet">

Animaciones de rebote:

• . Bounce
• . Bounce-in
• . Bounce-down
• . Bounce-up
• . Bounce-down-up
• . Bounce-up-down
• . Bounce-left
• . Bounce-right
• . Bounce-left-right
• . Bounce-right-left

Animaciones de fundido:

• . Fade-in
• . Fade-Down
• . Fade-up
• . Fade-Down-up
• . Fade-up-down
• . Fade-Left
• . Fade-Right
• . Fade-Left-right
• . Fade-Right-left

Animaciones de otoño:

. Fall-
. otoño-izquierda
. caída-derecha
. Fall-izquierda-derecha
. Fall-derecha-izquierda

Animaciones Flip:

• . flip
• . flip-x
• . flip-y
• . flip-z
• . flip-swing-x
• . flip-swing-y
• . flip-swing-z
• . flip-x-inverse
• . flip-y-inverse
• . flip-z-inverse
• . flip-x-through
• . flip-y-through
• . flip-z-through
• . flip-slide
• . flip-slide-x
• . flip-slide-y
• . flip-slide-z
• . flip-slide-x-inverse
• . flip-slide-y-inverse
• . flip-slide-z-inverse
• . flip-slide-x-through
• . flip-slide-y-through
• . flip-slide-z-through

Animaciones de bisagra:

• . hinge
• . hinge-right
• . hinge-left-right
• . hinge-right-left

Rotar animaciones:

. Gire
. Rotate-inverso
. periódico
. periódico-inverso
. rotar-Top
. rotar-
inferior. rotar-parte inferior
. rotar-parte inferior-
. Gire-izquierda
. Gire a la derecha
. Girar-izquierda-derecha
. rotar-
a la izquierda. girar-abajo-izquierda
. rotar-abajo-derecha
. rotar-arriba-izquierda
. girar-arriba-derecha
. fly-Left
. Fly-Right
. fly-izquierda-derecha
. Fly-Right-left

Canta animaciones:

• . Sing
• . Sing-bottom
• . Sing-top-bottom
• . Sing-bottom-top
• . Sing-left
• . Sing-right
• . Sing-left-right
• . Sing-right-left
• . Sing-swing
• . Sing-swing-bottom
• . Sing-swing-left
• . Sing-swing-right
• . Sing-swing-left-right
• . Sing-swing-right-left

Animaciones de diapositivas:

• . Deslice
• . Deslice-bottom
• . Deslice-top-bottom
• . Deslice-bottom-top
• . Deslice-left
• . Deslice-right
• . Deslice-left-right
• . Deslice-right-left
• . Deslice-sticky
• . Deslice-sticky-bottom
• . Deslice-sticky-left
• . Deslice-sticky-right
• . de-Top
• . desde abajo
• . desde la izquierda
• . de derecha
• . de-Top-left
• . desde abajo-left
• . de-Top-right
• . desde abajo-right
• . Deslice-west-east
• . Deslice-east-west
• . Deslice-north-south
• . Deslice-south-north

Animaciones de velocidad:

• . Speed-Right
• . Speed-Left
• . Speed-Right-left
• . Speed-Left-right

Animaciones de lanzamiento:

• . Toss-superior-izquierda
• . Toss-Top-Right
• . Toss-abajo-izquierda
• . Toss-inferior derecha

Animaciones bamboleo:

• . Wobble
• . Wobble-bottom
• . Wobble-top
• . Wobble-north
• . Wobble-west
• . Wobble-skew

Otras animaciones:

• . Flash
• . Red-Alert
• . Pulse
• . Pulse-large
• . roll
• . roll-right
• . Scale
• . Scale-large
• . Shake
• . Raja
• . Raja-x
• . Spin
• . Stomp
• . swing
• . tada