Как использовать связанные анимированные CSS?

Question

Как использовать связанные анимированные CSS?

0

Я пытаюсь использовать animate.css

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

это:

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

И HTML:

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

И затем 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');
});
});

Но когда я нажимаю на yo он изменяет классы (так что я знаю, что JQuery работает), но ничего не происходит. Я также добавил класс в css и изменил цвет шрифта, и он работает (поэтому я знаю, что ссылка работает правильно). Но при этом я не нажимаю анимацию вобуляции?

maxisme 03 янв. 2014, в 20:03

Источник

0

Вы уверены, что таблица стилей загружается?
David Thomas 03 янв. 2014, в 18:39
0

да уверен на 100%! Я попробовал это в этой скрипке
maxisme 03 янв. 2014, в 21:03

Теги:

jquery

html

css

1 ответ

Ещё вопросы

Вы уверены, что таблица стилей загружается?
да уверен на 100%! Я попробовал это в этой скрипке

Meg · Accepted Answer · 2014-01-03T16-19-00.000Z

Я считаю, вам нужно указать, какая анимация будет вызвана. Попробуйте добавить это в свой анимированный класс:

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

Wobble не является именем класса, это просто имя вашей анимации, поэтому вы можете удалить wobble addClass в jQuery.

EDIT: Похоже, я не читал все ваши CSS. Попробуйте переместить .animated.wobble{} прямо под .animated{}.

Но он определяет это animation-name в своем CSS для элементов с классом animated и wobble (оба из которых добавлены с помощью jQuery).
@DavidThomas: О, мой плохой. Должно быть, я не прокрутил достаточно далеко в CSS. Думаю, ошибка новичка. : S