Stack Overflow
Stack Overflow

Questions tagged [animate.css]

Animate.CSS is a free collection of CSS animations that can be used in projects with very minimal effort, known as "just-add-water" CSS. It is used in conjunction with Wow.js for scrolling animating effects.

Animate.CSS is a free collection of CSS animations that can be used in projects with very minimal effort.

Usage:

  1. Link to Animate.css:

    <link href="css/animate.css" rel="stylesheet">

  2. Add animate classes:

    <p id="demo" class="animated fadeInDown">

Class name

  • bounce
  • flash
  • pulse
  • rubberBand

  • shake

  • headShake

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

Documentation:

494 questions
92
votes
7 answers

CSS Animation and Display None

I have a CSS Animation for a div that slides in after a set amount of time. What I would like is for a few divs to fill the space of the animated div that slides in, which it will then push those elements down the page. When I attempt this at first…
L84
  • 42,350
  • 55
  • 167
  • 243
18
votes
7 answers

Animate.css in hover

Today I tried to implement in my site animate.css But I wanted to make sure that the 'effect is activated in the: hover So I used jquery for this The code is : $(".questo").hover( function (e) { $(this).toggleClass('animated shake', e.type…
user3198605
  • 185
  • 1
  • 1
  • 7
14
votes
1 answer

How to animate a dropdown menu using CSS3 animations?

I would like to add a CSS3 effect to my dropdown. (Just like that one in Instagram.com on "My profile"). I'm using Animate.css for the CSS3 effects. I tried this, but it doesn't work. HTML
sparkle
  • 6,527
  • 18
  • 58
  • 92
12
votes
5 answers

Animate.css and Angular 4

I've poked around a bit, and it seems that there really is no straightforward way to get the Animate.css animations working in Angular. Meaning, the animations would essentially need to be stripped out of the Animate.css library and translated into…
QuietSeditionist
  • 624
  • 3
  • 8
  • 18
12
votes
3 answers

How to hide animated elements on load?

I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then…
Ejaz Karim
  • 3,495
  • 6
  • 33
  • 48
11
votes
2 answers

React JS toggle/ adding a class on hover

I'm using the animate.css library with React and trying to set up a element (button) to pulse when hovered over. Tried to look through the docs and here but can't find a way to achieve this simple task. If anyone has achieved this or found a…
Fernando B
  • 715
  • 2
  • 9
  • 23
9
votes
5 answers

How to add reactjs animation library and Animate .css to animate

I have this simple Todo List, I need to add animate.css library animations when adding and removing. I'm really new to react. I have read the documentation, but it's really hard to understand, This is a question asking for help with…
Sahan
  • 1,372
  • 2
  • 17
  • 33
9
votes
4 answers

Grunt is treating folder with a dot as a file

When trying to compile my grunt file and build into my dist folder for deployment I get the following error in the console: Running "rev:dist" (rev) task dist/public/app/app.js >> 63decaf3.app.js dist/public/app/vendor.js >>…
cereallarceny
  • 4,696
  • 3
  • 34
  • 72
8
votes
2 answers

Animate.css and Angularjs ng-hide

I am learning and experimenting with Angularjs and animate.css. I am trying to add animations when the ng-show is true or false. The showing and hiding works but not the animations. Hope someone here can show me what I am doing wrong. Here is the…
Miguel-.o
  • 178
  • 1
  • 4
  • 11
8
votes
3 answers

jQuery CSS animations with addClass and removeClass

So, I have now made jQuery Ajax code that checks that the username and password are correct. But instead of just displaying a error message, I'd like to shake the element as well. Define Shake? That kind of shake that wordpress has. Go to…
Miro Rauhala
  • 190
  • 1
  • 1
  • 9
7
votes
1 answer

animate.css animating distance

I am using animate.css for a login form. It works except not the way I want it to work. Currently I am using fadeInDown but it fades in down from a longer distance that I want. It fades in from off the viewport versus just fading in about 20px. I…
user1842315
  • 287
  • 3
  • 11
7
votes
2 answers

wow.js animation on mobile chrome triggers only on stop scrolling

I´m using wow.js with animate.css for showing some effects on scrolling. On desktop and mobile safari all works nice but not on mobile chrome. I think chrome does render the scrolling different? When I scroll down, the content blocks should appear…
m1crdy
  • 1,341
  • 2
  • 25
  • 56
7
votes
3 answers

Animate.CSS Adding Scroll Bar?

I am using Animate.CSS and I am using the "hinge" effect to have an image fall off the screen. When it goes off the screen it adds a vertical scroll bar to the page. When you scroll nothing is visible. Why is this scroll bar being added and how do I…
L84
  • 42,350
  • 55
  • 167
  • 243
6
votes
2 answers

setTimeout, jQuery operation, transitionend executed/fired randomly

EDIT: So now it's not random and it looks like it always fails to execute from the .css() method (no change were made). Still don't get the mistake I may have made though. I'm trying to animate the removal of a div with jQuery and…
Lucas
  • 93
  • 7
6
votes
1 answer

How to Integrate ReactCssTransitionGroup with animate.css?

I am just Trying to Integrate animate.css with react transition group.Yes I know there is already one question is there.But that is no more working.I need a working example. This is my Try
vignesh waran
  • 137
  • 1
  • 9
1
2 3
…
32 33