CookieM CookieM - 3 months ago 15
CSS Question

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:

<!DOCTYPE html>
<html>

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

<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>
</body>
</html>


Thanks for all the Help!

Answer

The <style> tag belongs to the <head> section and make sure the animate.min.css file is existed 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>
Comments