Animation Demo

Example for Hover Effects

Can be done with CSS class ban (banner) and ban-effect-...

    <div class="ban ban-effect-1 margin-bottom">
        <img class="image" src="https://www.schupp.shop/media/"wysiwyg/test.jpeg"" alt="Banner" />
        <div class="cap cap-no-bg cap-text-bg cap-text-bg-dark-3">
            <p class="text"><code>ban-effect-1</code></p>
        </div>
    </div>

Hover effect options

ban-effect-2

ban-effect-3

ban-effect-fade-out

ban-effect-grayscale-in

ban-effect-grayscale-out

ban-effect-blur-in

ban-effect-blur-out

Hover effect options for captions

With captions you can greate awesome effects like ban-caption-fade-out

With captions you can greate awesome effects like ban-caption-slide-up

With captions you can greate awesome effects like ban-caption-push-up

With captions you can greate awesome effects like ban-caption-hinge-up

With captions you can greate awesome effects like ban-caption-slide-down

With captions you can greate awesome effects like ban-caption-push-down

With captions you can greate awesome effects like ban-caption-hinge-down

With captions you can greate awesome effects like ban-caption-slide-left

With captions you can greate awesome effects like ban-caption-hinge-left

With captions you can greate awesome effects like ban-caption-fade-in

With captions you can greate awesome effects like ban-caption-slide-right

With captions you can greate awesome effects like ban-caption-hinge-right

Combination of Banner and Caption Effect

Combination of banner effect ban-effect-grayscale-out and caption effect ban-caption-fade-in and also placing the caption on top with cap-top

Animations

Just add CSS classes animated and the desired option likde shake - Add infinite to animate endless

<span class="ic ic-heart-o ic-2x animated infinite rubberBand">rubberBand</span>

Animation examples

rubberBand

shake

headShake

swing

tada

wobble

jello

fadeInDown

zoomIn

<p class="animated infinite headShake">This is a paragraph</p>

This is a paragraph - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Animation options

bounce
flash
pulse
rubberBand
shake
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
headShake
swing
tada
wobble
jello
hinge

fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
bounceIn
fadeOutDown
bounceInDown
bounceInLeft
fadeOutDownBig
rotateInDownRight
zoomIn
rotateInUpLeft
rotateInUpRight
rotateOut
slideInLeft

fadeOutLeft
rotateOutDownLeft
slideInRight
bounceInRight
fadeOutLeftBig
rotateOutDownRight
slideInUp
bounceInUp
fadeOutRight
rotateOutUpLeft
slideOutDown
bounceOut
fadeOutRightBig
rotateOutUpRight
zoomInDown
zoomInLeft

zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideOutLeft
bounceOutDown
fadeOutUp
slideOutRight
bounceOutLeft
fadeOutUpBig
slideOutUp
bounceOutRight
bounceOutUp
rollIn
rollOut

Animation on scroll

Can be achieved with data-aos Tags in HTML

<div data-aos="fade">
  <p>...</p>
</div>

data-aos="fade"

data-aos="fade" data-aos-anchor-placement="top-center"

data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="2000"

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Fade Animations

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

Flip Animations

flip-up
flip-down
flip-left
flip-right

Zoom animations

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

Optionals

Anchor placements:

data-aos-anchor-placement="..."

top-bottomWhen the top of box hits bottom of screen

center-topWhen the center of box hits top of screen

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

Easing

data-aos-easing="..."

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine

ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

Duration

data-aos-duration="2000"

Delay

data-aos-delay="300"

Offset

data-aos-offset="120"