Почему мой текст не подпрыгивает? CSS, HTML

Question

Я работаю над проектом, и я учился в то же время, и до сих пор все отлично работает!

Но я хочу, чтобы иметь возможность использовать анимированный код css из Animate.css, который должен работать совместно с javascript в файле wow.js. По сути, мне нужна помощь в устранении неполадок, почему код animate.css (например, wow animated bounceIn или wow animated fadeInUp) не работает.

Я бы предоставил вам файлы, но Im не хорошо с JSFiddle, но вот важные части.

HTML

<header> 
     <h2 class="wow animated bounceIn" data-wow-duration="700ms" data-wow-delay="100ms">Meet the Authors</h2> 
    </header> 

CSS

@-webkit-keyframes bounceIn { 
    0% { 
    opacity: 0; 
    -webkit-transform: scale(.3); 
    transform: scale(.3); 
    } 

    50% { 
    opacity: 1; 
    -webkit-transform: scale(1.05); 
    transform: scale(1.05); 
    } 

    70% { 
    -webkit-transform: scale(.9); 
    transform: scale(.9); 
    } 

    100% { 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    } 
} 

@keyframes bounceIn { 
    0% { 
    opacity: 0; 
    -webkit-transform: scale(.3); 
    -ms-transform: scale(.3); 
    transform: scale(.3); 
    } 

    50% { 
    opacity: 1; 
    -webkit-transform: scale(1.05); 
    -ms-transform: scale(1.05); 
    transform: scale(1.05); 
    } 

    70% { 
    -webkit-transform: scale(.9); 
    -ms-transform: scale(.9); 
    transform: scale(.9); 
    } 

    100% { 
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    transform: scale(1); 
    } 
} 

.bounceIn { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
} 

я мог бы предоставить файлы при необходимости

Answer 1

Вам нужно добавить этот .animated к вашему стилю, как это:

.animated { 
    -webkit-animation-duration: 1s; 
     -moz-animation-duration: 1s; 
     -o-animation-duration: 1s; 
      animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
     -moz-animation-fill-mode: both; 
     -o-animation-fill-mode: both; 
      animation-fill-mode: both; 
} 

Демо-версия: https://jsfiddle.net/IA7medd/qv5L7osh/

Answer 2

Чтобы ваша анимация работала, вам нужно добавить больше, чем просто объявить animation-name.

По крайней мере, вы должны добавить продолжительность на ней, как это:

.bounceIn { 
    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
    animation-duration: 4s; 
    -webkit-animation-duration: 4s; 
} 

See this fiddle