應用在手風琴面板標題

Question

我有一個手風琴在我html頁面過渡，我需要的標題（面板標題）中移動文本使用CSS3過渡到移動一點點正確的懸停

我曾嘗試下面

HTML給出

<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading headtext"> 
    <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
     Collapsible Group Item #1 
    </a> 
    </h4> 
</div> 
<div id="collapseOne" class="panel-collapse collapse"> 
    <div class="panel-body headtext"> 
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry</div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
<div class="panel-heading"> 
    <h4 class="panel-title"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
     Collapsible Group Item #2 
    </a> 
    </h4> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
    <div class="panel-body"> 
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry 
</div> 
    </div> 
    </div> 

CSS：

.panel-title > a { 
color: #43C3E8; 
} 
.panel-title > a:hover { 
color: #F06426; 
padding-left:20px; 
text-decoration:none; 
outline:none; 
transition:all 0.2s ease 0s; 
} 

.panel-heading { 
transition: all 0.2s ease 0s; 
} 

這樣做後，我得到的是懸停轉換應用於錨標記內的文本。但是當光標被刪除文本移動更快。我希望這個過渡時間與懸停相同。

Answer 1

添加過渡中的元素，而不是在：懸停

a { 
    display: inline-block; 
    color: white; 
    text-decoration:none; 
    padding: 20px; 
    background: black; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

a:hover { 
    background: red;  
} 

http://jsfiddle.net/Lw8UM/