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..

    Hover over a pre - how to highlight a single line with plain CSS?

    how change css href to all .html documents with button click?

    How are the page-break properties in CSS supposed to work?

    Why do the images move when clicked in html and css? How to prevent it? [closed]

    Fontawesome: How to control height and width of stacked icons

    CSS Less changes not showing. Compile or IIS error?

    How do you explain this div spacing issue?

    How to Center Logo in Responsive Header [closed]

    RoR - howto convert some HTML-elements with css to Rails

    how to do css changes only to links that are in side specific div without defining classes to a elements

    How to prevent html div from expanding when text size is changed

    CSS: How to do image change on rollover

    How to show/hide content on click with CSS

    how to put all labels in bold with css

    How to animate to position fixed?

    How to make an item to appear for a short time (Either Javascript or CSS) [closed]

    How to make video responsive for all the screen sizes?

    User agent, how to have diferent css files for diferent devices automaticly

    Extjs: how Element's up/down functions work?

    How to make an element stretch to the same height as its container?

    How to have constants in Flex CSS files

    How to implement small text list search functionality using CSS attribute selectors

    How to select “label for=list[]” in CSS?

    How to change the dimensions of a div depending of a number extern to that div? jquery/css

    How can i make each div look like seperate block?

    How do nested vertical margin collapses work?

    How do I apply css code for svg in google api charts

    how to set the font-family like a digital clock CSS? [closed]

    CSS - How to target Second Child List Items?

    How to Display a div on mouse-over using jquery ?