Animate.css not working dont know why?

I am new to HTML and CSS and wanted to animate my trial website. Though when I added the Animation.css to my file it messed it up and wouldn't animate and messed up my pictures and background.

Here is my code:

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>

Thanks for all the Help!

Solution

The <style> tag belongs to the <head> section. Also make sure the animate.min.css file exists and the path is correct to the file.

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