CSS - Applying Transitions

Question

I'm not new to CSS but for some reason I've not played with animations or transitions up to this point. I want to learn how to apply any form of transition to a tooltip that I've made, but every time I read code and then try I seem to fail. I have a quick example of code I put together and maybe someone can quickly show me what I'm doing wrong.

Note: This is only an example, I don't plan to use a 2 second transition, makes it clear that it's working.

Following is the key code, please see the 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

Try this solution

you should assign all the styles to the after and to the hover status just the attribute you want to animate

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