：CSS關鍵幀元素只在視口中可見時纔有動畫效果？

Question

http://www.samnorris.co.nz

在關於下「精通」節我有一個「技能進度條」名單CSS製作，這是應該使用關鍵幀動畫 - 但動畫無法在我的網頁想必對，因爲它正在運行見過只要頁面加載。

只有當'Proficiencies'標題/幻燈片被點擊時，或者只有當具有技能欄的容器在視口中可見時，是否有任何延遲或觸發關鍵幀動畫的方法？

我知道的各種技術來只運行時頁面滾動到一定程度的動畫，但在這種情況下顯然這不是我想要什麼很...

相關代碼（Krish） ：

CSS

.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%;} } 

jQuery的

$('a.proficiencies').click(function(){ 
    $('.skills-list').toggleClass('html5'); 
}); 

Answer 1

看看你的代碼後，它將在a鏈接的點擊工作好與jQuery的addClass

HTML結構

<a class="proficiencies">Proficiencies(click)</a> 
    <ul> 
     <li><em>HTML5</em><span class="skills-expand html5anim"></span></li> 
     <li><em>CSS3</em><span class="skills-expand css3anim"></span></li> 
    </ul> 

jQuery的

$('a.proficiencies').click(function(){ 
    $('.html5anim').addClass('html5'); 

    $('.css3anim').addClass('css3'); 
}); 

現場演示：http://codepen.io/krish4u/pen/fyehA