how to use linked animated css?


Tags: jquery,html,css

Problem :

I am trying to use animate.css

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

which is this:

.animated {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -webkit-transform: translateX(0%);
    }
}
@-moz-keyframes wobble {
    0% {
        -moz-transform: translateX(0%);
    }
    15% {
        -moz-transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -moz-transform: translateX(20%) rotate(3deg);
    }
    45% {
        -moz-transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -moz-transform: translateX(10%) rotate(2deg);
    }
    75% {
        -moz-transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -moz-transform: translateX(0%);
    }
}
@-o-keyframes wobble {
    0% {
        -o-transform: translateX(0%);
    }
    15% {
        -o-transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -o-transform: translateX(20%) rotate(3deg);
    }
    45% {
        -o-transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -o-transform: translateX(10%) rotate(2deg);
    }
    75% {
        -o-transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -o-transform: translateX(0%);
    }
}
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}
.animated.wobble {
    -webkit-animation-name: wobble;
    -moz-animation-name: wobble;
    -o-animation-name: wobble;
    animation-name: wobble;
}

And HTML:

<a class="yo">yo</a>

And then Jquery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

$(document).ready(function(){ 
$(".yo").click(function() {
         $(this).addClass('animated wobble');
});
});

But when I click on yo it changes the classes (so I know the jquery is working) but nothing happens. I have also added a class to the css and changed the font colour and it works (so I know that the link is working properly) But still no wobble animation when I click?



Solution :

I believe you need specify which animation gets called. Try adding this to your animated class:

.animated {
   -webkit-animation-name: wobble;
   -moz-animation-name: wobble;
   -o-animation-name: wobble;
   animation-name: wobble;
}

Wobble isn't a classname, it's just the name of your animation, so you can remove the wobble addClass in your jQuery.

EDIT: Looks like I didn't read all your CSS. Try moving your .animated.wobble{} section right up underneath the .animated{} section.


    CSS Howto..

    How to make child element width 30 precent of parent elements width using css?

    Rollover table shows hidden span class text with css

    How does tablesort.js create the sort indicator arrows

    How to make commandeButon to vertical align?

    How to avoid this hardcoded index.js when use webpack?

    How to display certain content underneath another block of content

    How can I avoid my headers and footers being broken when displaying content wider than the viewport?

    How to resize & move css divisions at same time?

    How do I get text to overlay on top of an image in Dreamweaver?

    Apply individual coords to hundreds of div elements with minimal CSS styles, how?

    How to edit Skype contact me button CSS?

    css transform. How to get rotation degree value from “matrix( 0, 1, -1, 0, 0, 0”)?

    How to stop divs moving under each other when zooming out

    jQuery: how to avoid transparent effect on a mask div

    How to define absolute positioned element's anchor point?

    How do I get an html/css form to post to Gravity Forms?

    How to keep animated gifs animated while scrolling on iOS devices?

    HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

    How do I switch my CSS stylesheet using jQuery?

    How to work with fixed positioning in CSS?

    How to load an onScroll background image before user scrolls to them?

    CSS: How to move hint box (a:hover) to the left?

    How can I style a JavaFX menu and its items in CSS?

    How does a GPL license restrict commercial web applications? [closed]

    How can I make these CSS absolute positions work in IE?

    How to access my .png from a folder using CSS?

    How to use css method of rotation in jquery

    How to avoid a vertical dropdown menu to add the vertical scrollbar when at bottom?

    2 Sidebar Columns Layout (How)?

    IOs Cordova long-press shows text-select magnifying glass even with text-selection disabled, how to remove?