How to make text visible after transition moving through text

Question

I have some simple transition animation, I want to make text ( A href ) invisible, so I used "display: none" and I want to make it visible with "display: block" after image coming through it using "onclick" thing from javascript on that image. Here is my jsfiddle : http://jsfiddle.net/ofy4t5a8/

#facebook_text a {
    position: absolute;
    font-size: 15px;
    color: #000;
    text-decoration: none;
    margin-left: 50px;
    margin-top: -10px;
    z-index: 1;
    display: none;
}
#facebook_image.fly {
    position: absolute;
    margin-left: 125px;
    margin-top: 0px;
    transition: all 5s ease-out;
}
#facebook_image img {
    position: absolute;
    z-index: 10;    
    height: 35px;
    width: 35px;
    margin-top: -15px;
}
                            <div id="facebook_text">
                                <a href="google.com" alt="facebook" target="_blank">Facebook</a>
                            </div>
                            <div id="facebook_image">
                                <img class="image_animation" src="facebook.jpg"></img>
                            </div>
                            <script>
                                document.querySelector('.image_animation').onmouseover=function()    {
                                var d = document.getElementById("facebook_image");
                                d.className = d.className + " fly";    
                                }
                            </script>

Answer 1

facebook_imageYou should catch event when it ends, you can do it like this:

 transitionEnd = (function transitionEndEventName() {
        var i,
            el = document.createElement('div'),
            transitions = {
                'transition':'transitionend',
                'MozTransition':'transitionend',
                'WebkitTransition':'webkitTransitionEnd'
            };

        for (i in transitions) {
            if (transitions.hasOwnProperty(i) && el.style[i] != undefined) {
                return transitions[i];
            }
        }
    })();
var a = document.querySelector('a');
var b = document.querySelector('.facebook_image');
b.addEventListener(transitionEnd, function(){
     a.style.display = "block";
}