CSS hover animation not working

Question

Hi everyone i have one problem with CSS hover animation. I have created Two demo :

First DEMO animation is working well. But seconde DEMO is not working.

So in second demo you can see there is two name for example Paul and Rihanna When you hover the Paul's name then the hovercard will open but without animation. But if you check first demo then you can see the animation working on there. Anyone can help me what i am missing to working second demo like first demo.

AJAX:

var response = '<div class="p-tooltip"> <div class="profile-header"></div> <div class="profile-navigation"> <a href="http://kraigo.tumblr.com/" class="profile-action">Follow</a> <p class="profile-nick"> <a href="http://kraigo.tumblr.com/">Page Name</a> </p> </div> <div class="profile-ava"></div> <div class="profile-info"> <h1 class="profile-title">Username</h1> <p class="profile-description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy ..</p> </div> <ul class="profile-items"> <li></li> <li></li> <li></li> </ul> </div>';

$(document).ready(function () {

    function showProfileTooltip(e, id) {
        //send id & get info from get_profile.php 
        $.ajax({
            url: '/echo/html/',
            data: {
                html: response,
                delay: 0
            },
            method: 'post',
            success: function (returnHtml) {
                e.find('.k-isim-wrp').html(returnHtml).promise().done(function () {
                    $('.kisi-isim').addClass('loaded');
                });
            }
        });

    }

    function hideProfileTooltip() {
        $('.kisi-isim').removeClass('loaded');
    }
    $('.kisi-isim').hover(function (e) {

        var id = $(this).find('.k-isim').attr('data-id');
        showProfileTooltip($(this), id);

    }, function () {
        hideProfileTooltip();
    });
});

CSS

.k-isim {
    float:left;
    width:auto;
    height:17px;
    font-weight:bold;
    position:relative;
    z-index:0;
}
.kisi-isim{
    float:left;
    width:auto;
    height:17px;
    font-weight:bold;
    position:relative;
}
.kisi-isim-mask {
    width:130px;
    position:relative;
    z-index:1;
}
.loaded .kisi-isim-mask{
    z-index:-1;
}
.profile-nnm {
    width:auto;
    height:17px;
    display:block;
}
.k-isim a:hover:before{
    content:'';
    position:absolute;
    display:block;
    width:100%;
    height:17px;
    left:0;
    z-index:2;
}
.p-tooltip {
    position: absolute;
    margin-top: 10px;
    top: 100%;
    left: 50%;
    margin-left: -140px;
    width: 280px;
    max-height: 120px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #F0F0F0;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}
.profile-header {
    height: 120px;
    background-image: url(https://pbs.twimg.com/profile_banners/571038694/1395748220/1500x500);
    background-size: auto 120px;
    background-position: 50%;
}
.profile-navigation {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}
.profile-nick {
    color: #fff;
    margin: 0;
    padding: 0.4em 0;
    font-size: 0.8em;
    font-weight: bold;
}
.profile-action {
    float: right;
    background-color: #eee;
    padding: 0.4em;
    border-radius: 2px;
    color: inherit;
    text-decoration: none;
    font-size: 0.8em;
    font-weight: bold;
}
.p-tooltip .profile-nnm {
    margin: -40px auto 0;
    width: 80px;
    height: 80px;
    background-size: 80px;
    border: 3px solid #F0F0F0;
    border-radius: 5px;
}
.profile-info {
    text-align: center;
    padding: 10px;
    opacity: 0;
}
.profile-title {
    font-size: 1.6em;
    margin: 0;
}
.profile-description {
    margin: 0;
    font-size: 0.8em;
}
.profile-items {
    margin: 0px;
    padding: 10px;
}
.profile-items:after {
    content:'';
    display: table;
    clear: both;
}
.profile-items li {
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    float: left;
    display: block;
    border-radius: 3px;
}
.profile-items li:not(:first-child) {
    margin-left: 10px;
}
.profile-items li:nth-child(1) {
    background-image: url(https://o.twimg.com/1/proxy.jpg?t=FQQVBBgwaHR0cHM6Ly9pLnl0aW1nLmNvbS92aS9CM3lna2lYRXVyWS9ocWRlZmF1bHQuanBnFAIWABIA&s=z1wybbbNHF0pyLthl3xhxVBNjbYlAEWEzPd-dUtrWOY);
}
.profile-items li:nth-child(2) {
    background-image: url(https://pbs.twimg.com/media/B7pkXfgCIAAwoY0.jpg:thumb);
}
.profile-items li:nth-child(3) {
    background-image: url(https://pbs.twimg.com/media/B7A3NHjIIAIt6eg.png:large);
}
.profile-header {
    -webkit-transform: translate(0, -50px);
    -moz-transform: translate(0, -50px);
    transform: translate(0, -50px);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
    opacity: 0;
}
.profile-info {
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.p-tooltip .profile-ava {
    -webkit-transform: scale(0.5) translate(0, -10px);
    -moz-transform: scale(0.5) translate(0, -10px);
    transform: scale(0.5) translate(0, -10px);
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    transition-delay: 0.1s;
    opacity: 0;
}
.profile-items li {
    -webkit-transform: translate(0, 50px);
    -moz-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    -webkit-transition-delay: 0.3s;
    -moz-transition-delay: 0.3s;
    transition-delay: 0.3s;
    opacity: 0;
}
.profile-items li:nth-child(2) {
    -webkit-transition-delay: 0.35s;
    -moz-transition-delay: 0.35s;
    transition-delay: 0.35s;
}
.profile-items li:nth-child(3) {
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    transition-delay: 0.4s;
}
.k-isim:hover .p-tooltip {
    visibility: visible;
    opacity: 1;
    max-height: 600px;
}
.k-isim:hover .profile-header, .k-isim:hover .profile-info, .k-isim:hover .p-tooltip .profile-ava, .k-isim:hover .profile-items li {
    -webkit-transform: translate(0, 0) scale(1);
    -moz-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1;
}

Answer 1

I didn't verify all your CSS, but I think that you did some changes compared to the working demo which made your demo not working. I think that the problem is when you don't have some margin (or padding) between your text (link or button) and its container, because if you try to hover the text from the right, the animation is working for both texts, but not when hovering it from left, top or bottom, I think that need some time between hovering the container and the text. I added borders to see what I'm talking about :

• Original working demo : ( look when I do it very fast, the animation is not always working )

• Your demo :

So to avoid the problem, you have to consider all that. You can, for example, add some padding to your kisi-isim class like what I did here.

Of course, I tried to show you what I think is the origin of the problem, and how you can avoid it. You have to edit your code to get the result that you are looking for with the manner that you like.

Hope that can help.