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
4
votes
2 answers

Custom horizontal scroll with animate.css

I have some code: $(window).load(function(){ // Horizontal scroll if($(".js-page-scroll").length){ $(".js-page-scroll").mCustomScrollbar({ axis:"x", theme:"dark-3", // scrollbarPosition:…
HamSter
  • 1,312
  • 2
  • 21
  • 47
4
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
  • 210
  • 1
  • 3
  • 15
4
votes
1 answer

Full screen video issue when using animate.css in Chrome

I have a page that has a video using the video tag. Also, my page uses the animate.css to add some animations to my elements. The issue is that when I use a style in the animate.css, My video does not go to full screen correctly. This is a sample of…
m2008m1033m
  • 904
  • 9
  • 24
4
votes
1 answer

animation wont show hidden blocks

I'm trying to make my own version of wow.js because of two reasons, the first is that it seems that wow.js is not longer maintained, and the second one because it only shows animations once The problem that i have is that my code doesn't show the…
Chico3001
  • 1,513
  • 1
  • 15
  • 32
4
votes
2 answers

Animating ui-view without position:absolute

I have the following structure in my Angular app:
Where my ui-view uses animate.css to bounce in and out of the screen. My problem is that during animation I get two instances…
CodingIntrigue
  • 65,670
  • 26
  • 159
  • 166
4
votes
1 answer

Triggering animations with parent DIV using WOW.js

I have a parent DIV (.wrap) with multiple images that fadeIn using WOW.js/Animate.css. Each image is positioned Absolute at different locations. I was wondering if there is a way to trigger all animations inside the parent DIV using the parent DIV's…
Paul Ruocco
  • 442
  • 3
  • 12
4
votes
1 answer

Stop CSS3 animation jumping

I have the following fiddle (Wekbit/Chrome only). Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup…
Maurice
  • 1,109
  • 1
  • 19
  • 44
3
votes
2 answers

How to make a multi-step simple animation in CSS?

I want to implement the following animation using CSS in the center of the screen: the text "Hello" fades in the text "Hello" fades out the small circle appears and changes to the bigger rectangle I implemented the 3rd step as follows: .step3…
ScalaBoy
  • 2,606
  • 5
  • 28
  • 64
3
votes
3 answers

Change the direction of animation

I am using wow.js with animate.js to show animation on mouse scroll. I want to change the direction of animation on small device like on large screen it should animate from right and on small device it should animate from bottom. Here is a snippet…
AG_
  • 2,363
  • 3
  • 15
  • 30
3
votes
3 answers

How to load animate.css with Webpack 3?

I'm trying to load animate.css to my app using following dependencies: https://github.com/daneden/animate.css https://github.com/andreimc/animate-css-webpack I'd like to achieve that I'll be able to configure what animations will load using…
crs1138
  • 798
  • 1
  • 9
  • 21
3
votes
1 answer

Vue JS Quasar framework transition rendering collision with router-view

Having an issue with q-transition surrounding a router-view. When the transition occurs, the new content comes into view before the old content has left the DOM. It places the new content low, below the existing element, then it pops up after the…
swannee
  • 3,139
  • 1
  • 19
  • 35
3
votes
2 answers

jQuery one() handler executed twice

I have a bug in my jQuery/animate.css code. The problem is an event handler that is called twice but it should be executed only one. You can find the code here, the important line is below: JSFiddle $('#tiles').addClass(tiles_in).one(animation_end,…
onda47
  • 516
  • 2
  • 5
  • 15
3
votes
4 answers

Toggle multiple divs with multiple buttons using animate.css - jQuery

I have three different buttons with three different divs that each toggle an applicable div in same place. Trying to do 2 things. Add class on .app-icon button when relative .app-div is showing so that I can add background color when active. Add an…
frshjb373
  • 605
  • 8
  • 23
3
votes
2 answers

Repeat animation every 5 seconds using Animate.css

Let's say I have this HTML: CONTINUE and this CSS: a#btn-shake { width: 200px; height: 40px; clear: both; display: inline-block; margin: 0px auto; animation-duration:…
John Doeherskij
  • 1,479
  • 3
  • 11
  • 17
3
votes
2 answers

CSS animation shifting position with transform

I have a div element called announcement which I have positioned thusly with CSS: #announcement{ position: fixed; bottom:50px; width: 340px; height: 90px; left: 50%; transform:translate(-50%,0); z-index:3; font-family: Courier,…
martellalex
  • 241
  • 3
  • 16
1 2
3
…
32 33