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
0
votes
1 answer

JS and Animate.css interval Issue

I am using animate.css for a feed. I have a div named feed that uses uses the slideInLeft class, remains for 3 seconds, then uses the fadeOut class. At this point, I need to change the content of the div and start again. Here's what I've…
tjfo
  • 1,110
  • 1
  • 10
  • 12
0
votes
1 answer

Webkit Background Attachment Fixed bug

I use parallax effect. In firefox works ok, but in Chrome, Safari, Opera bg dissapear (webkit). I use too animate.css, so when i remove this styles, all works ok. I read a lot on stackoverflow about this situation, I tried with…
M. Garbarczyk
  • 37
  • 1
  • 9
0
votes
1 answer

Animate an added event but not a dropped one

I'm using FullCalendar to display some events on my app. I want to use some css animations from animate.css when some event is added on the calendar. For this, I pass to the fullCalendar: eventRender: function(ev,elm){ $(elm).addClass("animated…
Leo
  • 7,061
  • 6
  • 26
  • 43
0
votes
2 answers

Animate.css - Wait for animation to finish before continuing

I'm currently using Animate.css for animation around the app I'm creating. I'm looking for a way to wait for the animation to finish before continuing. Here's what I thought would of worked, but doesn't. Any help is…
Dustin
  • 5,457
  • 18
  • 53
  • 82
0
votes
2 answers

Angular and Animate.css - Doesn't display correct information when used together

Having a bit of trouble with putting together Animate.css and AngularJS together, and I created a simple example hoping to make this problem solving a bit either. I have some information being sent in from the controller.js, and it gets put in a…
Dustin
  • 5,457
  • 18
  • 53
  • 82
0
votes
1 answer

How to make animation for all captions in flexslider using animate.css

I wanna make some animations for every caption in flexslider using css3 animation. tried using inview.js and pure css3 animation it's animating the first slide on page load only, Without the other slides.
dyaa
  • 1,290
  • 16
  • 40
0
votes
1 answer

css animate add class when scrolling (one pager)

I'm trying to fire animate.css events when page is scrolled (one pager). Basically I'd need jquery to add for example class .animate to every visible element in view that has for example class .anim Additional points: if there a way to add…
niksos
  • 229
  • 1
  • 3
  • 7
0
votes
1 answer

Chaining Bouncing Entrances/ Exits with Animate.css

I've just started playing with animate.css, attempting to use their bounceInRight/ bounceOutLeft animations. The idea is to have a section that will bounceOutLeft, have it's container slideUp()/ next container slideDown(), then use bounceInRight on…
AlbertEngelB
  • 14,038
  • 15
  • 60
  • 84
0
votes
2 answers

How to know if animate.css animation is completed with addClass in backbone view?

I'm using animate.css to put some nice effects to my backbone views. One of the animations that I'm using is the flipOutX when a list item is deleted. Here is my drop function: drop: function() { var that = this; this.$el.addClass('animated…
Michael
  • 1,950
  • 1
  • 29
  • 46
0
votes
2 answers

Add custom animation delay for every div with the class "bounce"?

How would I add a custom animation delay for every div with the class "bounce"? Basically the class bounce contains the animation css keyframes (animate.css). Now, I have 20 divs called "360player bounce". but they all bounce at the same…
Damian
  • 117
  • 1
  • 9
0
votes
1 answer

When navigating on a site, how can i make animations complete fully before browser jumps pages

i want to use animate.css in my webpage, on the navigation menu. E.g the menu flies out of the screen navigating. The main problem is: How i can delay the page load that i'm clicking until the animation is fully complete. Right now the animation is…
hunabku
  • 1
  • 1
0
votes
1 answer

js-waypoints with animate.css fire too early somehow

Dear stackoverflowers, somehow my waypoints fire when the page is loaded, not when they should fire. The goal of my waypoint is, that it should fire when it's in the viewport and 90% away from the top. Then it should remove the class 'hidden' and…
Dennis Schröder
  • 43
  • 1
  • 8
0
votes
2 answers

Alternative to animate.css to fadeInDown?

I'm using jScrollPane, and it breaks down when I apply animate.css to the page. So I need a "thing" for fadeInDown. I saw that jQuery has its own fadeIn function, but I need it to be faded in with coming down. Do you know any alternatives? It would…
Can Goktas
  • 117
  • 2
  • 12
0
votes
1 answer

JQuery Animate Z-Index?

In my page I have different menu items that trigger different corresponding pictures. The z-index switches the corresponding picture to the top. Here is the code: $(document).ready(function(){ var doorOpen =…
Matt O'Connell
  • 287
  • 2
  • 14
0
votes
1 answer

image positions not working

I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing EDIT: so i tried…
BlackSky
  • 15
  • 3
1 2 3
…
32
33