title: :CSS keyframe elements animate only when visible in viewport?
body: <p><a href="http://www.samnorris.co.nz" rel="nofollow">http://www.samnorris.co.nz</a></p>
  
  <p>In the About section under 'Proficiencies' I have a "Skills Progression Bar" list made with CSS, which is supposed to animate using keyframes - but the animation cannot be seen on my page presumably because it is running as soon as the page loads.</p>
  
  <p>Is there any way to delay or trigger the keyframe animations only when the 'Proficiencies' heading/slide is clicked, or alternatively only when the container with the skills bar is visible in the viewport?</p>
  
  <p>I am aware of the various techniques to only run an animation when the page is scrolled to a certain point, but in this instance obviously that's not quite what I want...</p>
  
  <p>Relevant code (for Krish):</p>
  
  <p>CSS</p>
  
  <pre><code>.about-skills {
      width:398px;
      margin:0;
      position:relative;
      float:left;
      font-size:12px;
      line-height:2em;
      padding:30px 0 30px;
      margin-left: 15px;
  }
  
  .skills-col { width:400px; }
  
  .skills-list { 
      display: none;
      list-style:none; 
      padding-top:20px;
  }
  
  .skills-list li { 
      margin-bottom:50px; 
      background:#ececec; 
      height:5px; 
      border-radius:3px; 
      border-left:1px solid #cecece; 
      border-top:1px solid #cecece; 
      border-right:1px solid #cecece; 
      border-bottom:1px solid #b5b5b5;  
  }
  
  .skills-list li em { 
      position:relative; 
      top:-30px;
  }
  
  .skills-expand {
      height:1px; 
      margin:2px 0; 
      background:#0dc9ff; 
      position:absolute;
      box-shadow:0px 0px 10px 1px rgba(0,198,255,0.4);
  }
  
  .html5       { display: block; width:85%;  -moz-animation:html5 2s ease-out;       -webkit-animation:html5 2s ease-out;       }
  .css3        { display: block; width:70%;  -moz-animation:css3 2s ease-out;        -webkit-animation:css3 2s ease-out;        }
  .jquery      { display: block; width:50%;  -moz-animation:jquery 2s ease-out;      -webkit-animation:jquery 2s ease-out;      }
  .php         { display: block; width:20%;  -moz-animation:php 2s ease-out;   -webkit-animation:php 2s ease-out;   }
  .dreamweaver { display: block; width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out; }
  .photoshop   { display: block; width:100%; -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out; }
  .responsive  { display: block; width:40%; -moz-animation:responsive 2s ease-out;   -webkit-animation:responsive 2s ease-out; }
  
  @-moz-keyframes html5       { 0%  { width:0px;} 100%{ width:85%;}  }
  @-moz-keyframes css3        { 0%  { width:0px;} 100%{ width:70%;}  }
  @-moz-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
  @-moz-keyframes php         { 0%  { width:0px;} 100%{ width:20%;}  }
  @-moz-keyframes photoshop   { 0%  { width:0px;} 100%{ width:100%;} }
  @-moz-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }
  @-moz-keyframes responsive  { 0%  { width:0px;} 100%{ width:40%;} }
  
  @-webkit-keyframes html5       { 0%  { width:0px;} 100%{ width:85%;}  }
  @-webkit-keyframes css3        { 0%  { width:0px;} 100%{ width:70%;}  }
  @-webkit-keyframes jquery      { 0%  { width:0px;} 100%{ width:50%;}  }
  @-webkit-keyframes php         { 0%  { width:0px;} 100%{ width:20%;}  }
  @-webkit-keyframes photoshop   { 0%  { width:0px;} 100%{ width:100%;} }
  @-webkit-keyframes dreamweaver { 0%  { width:0px;} 100%{ width:100%;} }
  @-webkit-keyframes responsive  { 0%  { width:0px;} 100%{ width:40%;} }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('a.proficiencies').click(function(){
    $('.skills-list').toggleClass('html5');
  });
  </code></pre>