title: I have a query as to how to use the animate parameters in a css sheet
body: <p><strong>Very recently, I looked at a code on developer options. I wasn't quite sure as to how the below parameters are being used. I took this code from <a href="http://divyaaquariumandpets.com/" rel="nofollow noreferrer">http://divyaaquariumandpets.com/</a> website</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  .animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>The above mentioned animation parameters are at the start of the animate.css sheet. are they classes? if no then how are they being used. If it has been declared at the start of the css page, then is it for the entire css sheet.
  I have seen coders declaring animation-duration inside the class they are referring to. This is quite confusing.</strong></p>