CSS animation to hide

by oilvier

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {background:beige; height:300px;}
.parent:hover .child
{
    height:50px; width:50px; background:red;
    display: block;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-name: fadeInFromNone;
    animation-duration: 1.5s;
    animation-name: fadeInFromNone;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display:none; 
        opacity: 0;
    }

    1% {
        display: block ; 
        opacity: 0;
    }

    100% {
        display: block ; 
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display:none; 
        opacity: 0;
    }

    1% {
        display: block ; 
        opacity: 0;
    }

    100% {
        display: block ; 
        opacity: 1;
    }
}