CSS - 應用轉換

Question

我不是新來的CSS，但由於某種原因，我還沒有玩過動畫或轉換到這一點。我想學習如何將任何形式的過渡應用到我所做的工具提示中，但是每次我閱讀代碼，然後嘗試我似乎都失敗了。我有一個快速的代碼示例，我可以放在一起，也許有人可以快速告訴我我做錯了什麼。

注意：這只是一個例子，我不打算使用2秒的轉換，說明它正在工作。

以下是關鍵代碼，請參閱jsfiddle here。

label[data-tooltip] { 
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3); 
    padding-bottom: 2px; 
    position: relative; 
    cursor: pointer; 

    &:hover:after { 
     transition: all 2s ease-in-out; 
     .borderRadius(3px); 
     content: attr(data-tooltip); 
     background: rgba(83, 83, 83, 0.95); 
     text-transform: none; 
     position: absolute; 
     line-height: 18px; 
     padding: 5px 10px; 
     font-size: 13px; 
     width: 100px; 
     z-index: 99; 
     color: #fff; 
     bottom: 120%; 
     left: -5px; 
    } 

    &:after { 
     display: none; 
    } 

    &:hover:after { 
     display: block; 
    } 
} 

Answer 1

試試這個solution

你應該 後和懸停狀態只是要動畫

label[data-tooltip] { 
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3); 
    padding-bottom: 2px; 
    position: relative; 
    cursor: pointer; 

    &:after { 
     transition: all ease 5s; 
     content: attr(data-tooltip); 
     background: rgba(83, 83, 83, 0.95); 
     text-transform: none; 
     position: absolute; 
     line-height: 18px; 
     padding: 5px 10px; 
     font-size: 13px; 
     width: 100px; 
     z-index: 99; 
     color: #fff; 
     bottom: 120%; 
     left: -5px; 
     opacity: 0; 
    } 

    &:hover:after { 
     opacity: 1; 

    } 
} 

.formRow { 
    background: #EFEFEF; 
    margin: 50px auto; 
    padding: 10px; 
    width: 50%; 
} 
.formRow-label { 
    display: inline-block; 
    margin-right: 20px; 
} 
.formRow-input { 
    display: inline-block; 
}