title: Unexpected animation in CSS
body: <p>I am working on a static website and have some animations in CSS:</p>
  
  <pre><code>*
  {
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      -ms-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;     
  }
  </code></pre>
  
  <p>This is fine and everything and every page is animated in the same way <strong>except one of my HTML documents</strong> which also contains input elements and a textarea:</p>
  
  <pre><code>&lt;form action="script/contact-form.php" method="post"&gt;
      &lt;b&gt;Full name:&lt;/b&gt;&lt;br/&gt;
      &lt;input type="text" name="name" /&gt;&lt;br/&gt;
  
      &lt;b&gt;Subject:&lt;/b&gt;&lt;br&gt;
      &lt;input type="text" name="subject" /&gt;&lt;br/&gt;
  
      &lt;b&gt;E-mail:&lt;/b&gt;&lt;br&gt;
      &lt;input type="text" name="email" /&gt;
      &lt;br/&gt;&lt;br/&gt;
  
      &lt;b&gt;Your comments:&lt;/b&gt;&lt;br/&gt;
      &lt;textarea name="comment"&gt;&lt;/textarea&gt;
      &lt;br/&gt;&lt;br/&gt;
  
      &lt;input type="submit" value="Submit" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>For some reason the entire page is then animated (unlike the <strong>other pages</strong>, which are using the <strong>same stylesheet</strong>). I tried disabling this with: </p>
  
  <pre><code>form, input, textarea
  {
      -moz-transition: none;
      -webkit-transition: none;
      -o-transition: color 0 ease-in-out;
      -ms-transition: color 0 ease-in-out;
      transition: none;   
  }
  </code></pre>
  
  <p>but it doesn't seem to have any effect. Here is what it looks like: <a href="http://notrussian.de/stack/contact-us.html" rel="nofollow">http://notrussian.de/stack/contact-us.html</a>. Clicking on other pages without the form has different effects.</p>
  
  <p>This is starting to drive me nuts and I really hope you guys could help me out.</p>
  
  <p>Thanks in advance.</p>