EzDev.org

animate.css

A cross-browser library of CSS animations. As easy to use as an easy thing. Animate.css


How do I animate my CSS progress bar?

I have this CSS progress bar right now and it animates great, but I wanted to add complete or not complete markers to it and I have no idea how to add those in there.

So as they go through the progress bar the greyed out 'x' circle will either change to a green check mark circle or the red 'x' circle if it wasn't finished. Right now I just have a progress bar that moves with each step.

Anyone know how I would add the circles to each step??

This is what I'm going for.. enter image description here

My HTML

<section class="container">
    <input type="radio" class="radio" name="progress" value="five" id="five">
    <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
 <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
    <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
    <div class="progress">
      <div class="progress-bar"></div>
    </div>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td>  <label for="five" class="label">Accept Proposal</label></td>
      <td><label for="twentyfive" class="label">Payment</label></td>
      <td><label for="seventyfive" class="label">Review Documents</label></td>
      <td><label for="onehundred" class="label">Complete</label></td>
    </tr>
  </tbody>
</table>
  </section>

My CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #464646;
}

.container {
  margin: 80px auto;
  width: 830px;
  text-align: center;
}
.container .progress {
  margin: 0 auto;
  width: 820px;
}

.progress {
  padding: 4px;
  background: rgba(226, 226, 226, 1);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
  position: relative;
  height: 7px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */
#five:checked ~ .progress > .progress-bar {
  width: 14.3%;
  background-color: #86e01e;
  text-align:left;
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 38%;
 background-color: #86e01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 64%;
  background-color: #86e01e;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}

.radio {
  display: none;
}

.label {
  display: inline-block;
  margin: 0 5px 10px;
  padding: 3px 8px;
  color: #464646;
  cursor: pointer;
}

Source: (StackOverflow)

How to apply animation conditionally?

In angularjs, inside a directive:

I have this array of animate.css animations:

['fadeIn','BounceInLeft'...]

And i have the following html:

<div ng-repeat="opt in quest.opts" ng-show="showBtns" class="animated" ng-class='getRandomClass()'>

1) How can i do something like this, so in every ng-repeat, a new animation from the list will be applied to that div?

2)Can i make them 1 after another when they animate?


Source: (StackOverflow)

Flexslider 2.0 with Animate.css for captions

I am trying to integrate animate.css for caption in flexslider but didn't get a success yet. Can any expert help me to do that.

Thanks -Shak


Source: (StackOverflow)

CSS Change Text Color Randomly

I know how to make that with JS but in http://daneden.github.io/animate.css/ Animate.css text changes so smoothly and there's no JS on it!

Can someone explain me?

Thanks


Source: (StackOverflow)

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 offset rather than the offset of each individual image.

<div class="wrap">

    <div class="calculator">
        <div class="wow fadeInDown" data-wow-delay="600ms" data-wow-offset="200">
            <img src="img/overlay-calculator.png" alt="">
        </div>
    </div>

    <div class="coffee">
        <div class="wow fadeInDown" data-wow-delay="800ms" data-wow-offset="200">
            <img src="img/overlay-coffee.png" alt="">
        </div>
    </div>

    <div class="file1">
        <div class="wow fadeInUp" data-wow-delay="1200ms" data-wow-offset="200">
            <img src="img/overlay-file-1.png" alt="">
        </div>
    </div>

    <div class="file2">
        <div class="wow fadeInUp" data-wow-delay="600ms" data-wow-offset="200">
            <img src="img/overlay-file-2.png" alt="">
        </div>
    </div>

    <div class="keyboard">
        <div class="wow fadeInDown" data-wow-delay="100ms" data-wow-offset="200">
            <img src="img/overlay-keyboard.png" alt="">
        </div>
    </div>

    <div class="marker">
        <div class="wow fadeInUp" data-wow-delay="1200ms" data-wow-offset="200">
            <img src="img/overlay-marker.png" alt="">
        </div>
    </div>

    <div class="mobile">
        <div class="wow fadeInUp" data-wow-delay="1000ms" data-wow-offset="200">
            <img src="img/overlay-mobile.png" alt="">
        </div>
    </div>

    <div class="mouse">
        <div class="wow fadeInDown" data-wow-delay="500ms" data-wow-offset="200">
            <img src="img/overlay-mouse.png" alt="">
        </div>
    </div>
</div>

Source: (StackOverflow)

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 is gone?

HTML

<div class="tile10"></div>

CSS

@-webkit-keyframes move {
    0% {
        background-position: 6px 0;  
    }
    100% {
        background-position: 6px 80px;  
    }
}


.tile10 {
    width: 80px;
    height: 80px;
    position: absolute;
    background: url(http://www.mauricederegt.nl/loopband.svg);
    background-repeat: repeat-y;
    -webkit-animation: move 3s linear infinite;   
    z-index: -1;
}

Source: (StackOverflow)

Animate.CSS Replay?

I have an animation using Animate.CSS that I would like to have replay if the user would like but what I have attempted does not work. Here is the code:

HTML:

    <div class="img-center">
       <img src="path.jpg" class="feature-image animated rotateInDownRight" />
    </div>
       <p class="textcenter">&nbsp;</p>
    <div class="img-center">
       <a rel='nofollow' href="#" id="replay">Replay</a>
    </div>

JS:

var $j = jQuery.noConflict();
$j("#replay").click(function() {
    $j('.feature-image').removeClass('animated rotateInDownRight').addClass('animated rotateInDownRight');
});

I do know the script itself works as I can see it happen in Firebug however that animation doesn't animate again. How do I achieve this with Animate.CSS?


Source: (StackOverflow)

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 wordpress.com/wp-login.php and fill there some random info and the element shakes.

That shake can be done by Animate.css.

What's the problem then?

When the login fails, jQuery makes this.

$('.element').addClass('shake');

But because the shake element has CSS Animations that run only once, we won't be needing the CSS shake class after it shaked the element.

So I tried:

$('.element').addClass('shake').removeClass('shake');

But that happens all too quickly.

So I tried again:

$('.element').addClass('shake').delay(1000).removeClass('shake');

Still not play the animation and then remove the class .shake from the .element. If the user enters wrong details more then once then shake won't work.

You can play with the fiddle here.

Goal is to be able to shake the element more then once by clicking the Shake button.


Source: (StackOverflow)

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 animations when scrolling downwards, only when scrolling upwards and i cand find why...

Can anyone help me to find the error?

The function in charge of showing the elements is this:

function showBlocks() {
    $('.wow2').each(function () {
        var elementTop = $(this).data('wow2-top');

        $(this).html(elementTop);

        // Shows Elements
        if ((elementTop >= top) && (elementTop <= bottom)) {
            $(this).css('visibility', 'visible');
            $(this).addClass('animated').addClass($(this).data('wow2-class'));
        }
        /*
         // Hides Elements
         if ((elementTop < top) || (elementTop >= bottom)) {
         $(this).css('visibility', 'hidden');
         $(this).removeClass('animated').removeClass($(this).data('wow2-class'));
         }
         */
    });

}

here is my jsfiddle:


Source: (StackOverflow)

Queue css transition [closed]

I have a problem that don't let me sleep.

Assume that I have these divs:

<div class="container">

    <div class="sixteen columns">
        <div class="dark animated fadeOutRight"><img src="images/dark.gif"></div>
        <h2 class="motto">aspettaci...</h2>
    </div>

</div>

animated with animate.css (but i think that any animation is good as example).

I want to create a sequence of divs that transit in the page. for example.

div1 -> fade out then
after n seconds div2 -> slide in then
div2 -> slide out then div3 comes and STOP...

I try with delay but its a mess and div2 is always visible on the page. I don't really know how to do this. Maybe I have to move all divs out of the pages, or I can do this in much simply way with jQuery?


Source: (StackOverflow)

BS3 carousel + animate.min.css not working perfectly in Firefox

I am using firefox 33.0 in Ubuntu 14.04. I have a website(localhost) with bootstrap 3 carousel. I have applied "animated pulse" (animate.min.css) class to my "img" in the "class=item" div and "animated fadeinleft" to my carousel-caption.

<div class="item">
   <img src="images/2.jpg" class="img-responsive animated pulse">
       <div class="container">
           <div class="carousel-caption">
               <h1 class="animated fadeinleft">Another example headline.</h1>
               <p class="animated fadeinright">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
         </div>
      </div>
</div>

There are 3 slides in total. For the first appearance of each slide, the image and carousel caption comes with the effect (animate.min.css). But after that the slides just comes and goes without any effect. This happens only in firefox. In Chrome 38.0.2125.104 it works as expected. Somebody please suggest a way to fix the issue.


Source: (StackOverflow)

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 keep it from being added?

Thanks!

Code:

HTML

<img id="animate" class="fear" src="/2012/images/september/fear-sign.png" />

CSS

.fear{
     position:absolute;
     left:150px;
     top:0px;
}

#animate {
    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}

JS

var $j = jQuery.noConflict();
   $j(document).ready(function() {
       $j('#animate').addClass('animated hinge');
           });

Here is a fiddle I created.


Source: (StackOverflow)

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 animates in, that looks pretty ugly).

However, I solved problem by adding two classes in my css but it creates another problem.

.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp');

This works good until I add animation-delay to an elements. Here is an explanation what I want to achieve. I've elements like this:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

I want to add animation delay to each of the elements, so that they fadeInUp after each other with a specified seconds in each of the elements using animation-delay property. I can't get this to work. I tried following code without using animation-delay but no success.

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

Let me know if my approach is completely wrong? If yes, then can you provide better way to accomplish.


Source: (StackOverflow)

Css animation across an Arc

animation across an Arc

Is it possible with current CSS3 to animate an object (DIV) along an this arc?


Source: (StackOverflow)

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 >> a09756ab.vendor.js
dist/public/app/app.css >> d2017fc8.app.css
Warning: Unable to read "dist/public/bower_components/animate.css" file (Error code: EISDIR).

The reason for this is that I have a bower component I've got installed named animate.css. This library is of course installed in my bower_components folder, but the matching string I have in my Grunt file only looks for files with an extension of .js, .css, et cetera. Here's my matching string:

// Renames files for browser caching purposes
rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/public/{,*/}*.js',
        '<%= yeoman.dist %>/public/{,*/}*.css',  // Offending line
        '<%= yeoman.dist %>/public/assets/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
        '<%= yeoman.dist %>/public/assets/fonts/*'
      ]
    }
  }
}

And here's the directory structure:

bower_components
  -> ...
  -> angular-ui-router
  -> animate.css  // Folder with the error
  ---> animate.css  // File that it should be recognizing
  ---> animate.min.css  // File that it should be recognizing
  -> es5-shim
  -> ...

In this case, how would I tell Grunt that this is a directory which contains files rather than a file itself?


Source: (StackOverflow)