Animate-hover NPM

animate-hover.css

Common CSS helper classes.

CSS animate-hover Classes

Animate Hover: Colección de efectos de animaciones hover CSS3 para aplicar a enlaces, logotipos, imágenes destacadas, etc. Animate hover Aplicalo fácilmente a tus propios elementos, modifica o simplemente utiliza para inspirarte. Disponible en CSS, Sass.

Install

Install with Npm

npm

To install with npm run

$ npm install animate-hover --save

Basic Usage

Include the stylesheet on your document's <head>

<head>
  <link rel="stylesheet" href="css/animate-hover.min.css">
</head>

for animations based on animate.css

<head>
  <link rel="stylesheet" href="css/animate.css/animate.min.css">
  <link rel="stylesheet" href="css/animate-hover.min.css">
</head>

Add the class ahvr-animated animated-box to the element you want to animate.
Finally you need to add one of the following classes:

Class Name
`animated-bounce`	`animated-flash`	`animated-pulse`	`animated-rubberBand`
`animated-shake`	`animated-headShake`	`animated-swing`	`animated-tada`
`animated-wobble`	`animated-jello`	`animated-bounceIn`	`animated-bounceInDown`
`animated-bounceInLeft`	`animated-bounceInRight`	`animated-bounceInUp`	`animated-bounceOut`
`animated-bounceOutDown`	`animated-bounceOutLeft`	`animated-bounceOutRight`	`animated-bounceOutUp`
`animated-fadeIn`	`animated-fadeInDown`	`animated-fadeInDownBig`	`animated-fadeInLeft`
`animated-fadeInLeftBig`	`animated-fadeInRight`	`animated-fadeInRightBig`	`animated-fadeInUp`
`animated-fadeInUpBig`	`animated-fadeOut`	`animated-fadeOutDown`	`animated-fadeOutDownBig`
`animated-fadeOutLeft`	`animated-fadeOutLeftBig`	`animated-fadeOutRight`	`animated-fadeOutRightBig`
`animated-fadeOutUp`	`animated-fadeOutUpBig`	`animated-flipInX`	`animated-flipInY`
`animated-flipOutX`	`animated-flipOutY`	`animated-lightSpeedIn`	`animated-lightSpeedOut`
`animated-rotateIn`	`animated-rotateInDownLeft`	`animated-rotateInDownRight`	`animated-rotateInUpLeft`
`animated-rotateInUpRight`	`animated-rotateOut`	`animated-rotateOutDownLeft`	`animated-rotateOutDownRight`
`animated-rotateOutUpLeft`	`animated-rotateOutUpRight`	`animated-hinge`	`animated-jackInTheBox`
`animated-rollIn`	`animated-rollOut`	`animated-zoomIn`	`animated-zoomInDown`
`animated-zoomInLeft`	`animated-zoomInRight`	`animated-zoomInUp`	`animated-zoomOut`
`animated-zoomOutDown`	`animated-zoomOutLeft`	`animated-zoomOutRight`	`animated-zoomOutUp`
`animated-slideInDown`	`animated-slideInLeft`	`animated-slideInRight`	`animated-slideInUp`
`animated-slideOutDown`	`animated-slideOutLeft`	`animated-slideOutRight`	`animated-slideOutUp`
`animated-heartBeat`

Full example:

Animate: All Box

<h1 class="ahvr-animated animated-box animated-bounce">Example</h1>

<a href="#">
  <div class="ahvr-square ahvr-boxed-image ahvr-animated animated-box animated-bounce">
    <img class="img-fluid image" src="./images/img_avatar.png" alt="Avatar">
    <div class="overlay">
      <div class="middle">
        <i class="box-icon fa fa-soccer-ball-o"></i>
        <h4 class="box-title"> Soccer Team </h4>
        <p class="box-text"> Best Sports Features</p>
      </div>
    </div>
  </div>
</a>

Animate: Box Content

<h1 class="ahvr-animated animated-box ">Example
  <span class="animated-bounce"> animated-bounce </span>
</h1>

<a href="#">
  <div class="ahvr-square ahvr-boxed-image ahvr-animated animated-box">
    <img class="img-fluid image" src="../../../images/img_avatar.png" alt="Avatar">
    <div class="overlay animated-bounce">
      <div class="middle">
        <i class="box-icon fa fa-soccer-ball-o"></i>
        <h4 class="box-title"> Soccer Team </h4>
        <p class="box-text"> Best Sports Features</p>
      </div>
    </div>
  </div>
</a>

animate-hover animate hover

animate.css user

@everything-registry/sub-chunk-1140

2 years ago

2 years ago

5 years ago

6 years ago