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 can I get a CSS class selector to override the input[readonly] selector?

    How do you make an input element fill parent?

    CSS: How to make this topheader?

    How to use CSS hover inside html-tag?

    How to achieve a fancy outline around an image in CSS

    How to override element.style height

    How SCSS rule evaluation done by browser

    Text-only CSS slideshow

    How to prevent conflicts between css rules

    how to call all Google font CSS under specific font face

    How can I achieve a jQuery onhover effect like WordPress post list's edit links?

    How to avoid text go below the thumbnail with css

    How do three.js transforms and CSS3 3D-transforms correspond?

    how to get kendo ui mobile style silver

    How to enable overflow scrolling within a Semantic Ui Grid?

    How to draw a border around a semitransparent image? (css) [duplicate]

    How to fix CSS background position

    How can I configure this gulpfile the right way to have a nice workflow

    How can i apply more than 1 style to a single node at the same time programmatically

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    how to alter a css class directly?

    How to make H1 tag responsive in Avada WordPress theme using CSS

    How to show color only to the first li?

    How can set text row limit using angularJs ng-repeat?

    How does this wheel menu get the name

    How to make expand-collapse different div heights according to device width using css/javascript

    How to remove css property from last child element?

    How can I float dynamic div's next to each other?

    How to update CSS to values that were chosen in a form? (jQuery)

    How to show/hide content based on a css class