Animate.css 不工作不知道为什么？

Question

我是 HTML 和 CSS 的新手，想为我的试用网站制作动画。虽然当我将 Animation.css 添加到我的文件时它搞砸了并且不会动画并且弄乱了我的图片和背景。

这是我的代码：

h2 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: aqua;
  position: relative;
  left: 282px;
  text-transform: uppercase;
  font-size: 45px;
  animation-name: animation1;
  animation-duration: 2;
}
h1 {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: aqua;
  position: relative;
  left: 250px;
  text-transform: uppercase;
  font-size: 55px;
}
img {
  position: relative;
  bottom: 0px;
  left: 425px;
}
body {
  background-image: url(cool%20gradient.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
a {
  color: hotpink;
  text-transform: uppercase;
  font-size: 30px;
  position: relative;
  left: 165px;
  bottom: -50px;
}

<h2 class="animated bounceInRight">Want to see a Pug</h2> 
<h1 class="animated bounceInLeft">Licking a Screen</h1>
<img class="animated fadeInDown" src="Down-Arrow1.png" style="width:200px;height:200px;">
<a class="animated fadeInUp" href="http://www.sanger.dk/">Pug Licking Screen</a>

感谢大家的帮助！

Answer 1

<style> 标签属于 <head> 部分。还要确保 animate.min.css 文件存在并且文件的路径正确。

<!DOCTYPE html>
<html>

  <head>
    <style>
    h2 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: aqua;
        position: relative;
        left: 282px;
        text-transform: uppercase;
        font-size: 45px;
        animation-name: animation1;
        animation-duration: 2;
        }

    h1 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        color: aqua;
        position: relative;
        left: 250px;
        text-transform: uppercase;
        font-size: 55px;
       }

    img {
        position: relative;
        bottom: 0px;
        left: 425px;   
        }

    body {
        background-image: url(cool%20gradient.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        }   

    a {
        color: hotpink;
        text-transform: uppercase;
        font-size: 30px;
        position: relative;
        left: 165px;
        bottom: -50px;
      }   

    </style>
    <link rel="stylesheet" href="animate.min.css">     
  </head>  

  <body>
   <h2 class="animated bounceInRight">Want to see a Pug</h2> 
   <h1 class="animated bounceInLeft">Licking a Screen</h1>
   <img class="animated fadeInDown" src="Down-Arrow1.png"      style="width:200px;height:200px;">
   <a  class="animated fadeInUp" href="http://www.sanger.dk/">Pug Licking Screen</a>   
  </body>
</html>

Animate.css 不工作不知道为什么？

Animate.css not working dont know why?

html

css

animate.css