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