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:

519 questions
116
votes
9 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
  • 45,514
  • 58
  • 177
  • 257
20
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
  • 864
  • 2
  • 12
  • 27
20
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
  • 205
  • 1
  • 2
  • 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
  • 7,530
  • 22
  • 69
  • 131
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
  • 703
  • 4
  • 8
  • 18
12
votes
4 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,676
  • 6
  • 36
  • 49
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,422
  • 2
  • 18
  • 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,913
  • 4
  • 39
  • 74
8
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
  • 307
  • 3
  • 13
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
  • 12
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
2 answers

jquery detect animation end of animate.css

i have a div of a splash screen for a site i'm building.
oscar pro logo
im useing animate css to…
Nir Golan
  • 270
  • 1
  • 3
  • 15
7
votes
2 answers

CSS animation not working on span with animate.css

I have a
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,371
  • 2
  • 25
  • 58
7
votes
5 answers

Wow.js doesn't load animations with delay of more than 1s. Why?

I'm using animate.css with wow.js. The third one, with a data delay of more than one second, doesn't fadeInLeft. It fades in normally (not from left). Anyone has encountered this problem before? How can I fix it? -- This is my view. I have three…
alejorivera
  • 935
  • 1
  • 10
  • 25
1
2 3
…
34 35