title: keyframes animation in html css not working
body: <p>I am playing with some animations, but it won't work at all.
  It has to be a bounce animation. This is my first time working with it. So I hope I don't make very bad mistake</p>
  
  <p>This is mine .html file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="logo"&gt;&lt;img src="Header_red.png"/&gt;&lt;/div&gt;
  &lt;div class="intro"&gt;&lt;p&gt;some text&lt;/p&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my .css file:</p>
  
  <pre><code>    html{
      background: url(background.jpg) no-repeat center center fixed;
      overflow:hidden;    
  }
  
  .logo
  {
      text-align:center;
      margin-left:auto;
      margin-right:auto;
      animation-delay:1.2s;
      animation-duration:4.8s;
      animation-iteration-count:1;
      animation-fill-mode:both;
      animation-name:logo;    
  }
  
  
  .intro{
          text-align:left;
      margin-left:100px;
      margin-right:auto;
      animation-duration:5.5s;
      animation-iteration-count:1;
      animation-fill-mode:both;
      animation-name:logo;        
  }
  @keyframes logo {
      0%{transform: 
          translate(000px, 1500px);}
      20%
      {
          transform:translate(000px, 235px);
      }
      25%
      {
          transform:translate(000px, 265px);
      }
      65%
      {
          transform:translate(000px, 265px);
      }
      100%
      {
          transform:translate(000px, -300px);
      }
  }
  
  
  @keyframes intro{
  
  0% {transform:
  translate(000px, -400px);}
  65% {transform:
  translate(000px, -165px);}
  100% {transform:
  translate(000px, -135px);}
  }
  </code></pre>
  
  <p>I hope someone could help me!
  Thanks!</p>