JSFiddle - React, Tailwind, and code Playground

by zono

HTML

<div>
            <img class="moveLogo" id="imageUnibit" src="http://www.bulsms.com/imgs/s/cl/unibit.png"/>
        </div>
        <table id="containerTable">
            <tr>
                <td><img class="transparent" src="http://svejo.net/attachments/stories-photos/0174/6365/original/koledno-parti-v-detski-tsentar-partymiro-plovdiv-praznik-s-dyado-koleda-snezhanka-i-dzhudzheta.jpg"/></td>
            </tr>
            <tr>
                <td class="transparent" id="messageContainer">Честита Нова Година</td>
            </tr>
        </table>
        <div>
            Автор Георги Наумов. <a href="mailto:[email protected]">[email protected]</a> за контакти и препоръки.
        </div>

CSS

.transparent {
                opacity: 0;
            }

            .nottransparent {
                opacity: 1;
                animation-duration: 4s;
                animation-name: opacityToVisible; 
                -webkit-animation-name: opacityToVisible; 
                -webkit-animation-duration: 4s;
            }     
            
            #containerTable {
                margin: 0px auto;
            }

            #messageContainer {
                color: red;
                font-size: 200%;
                font-weight: bold;
            }

            #imageUnibit {
                position: absolute;
                right: 69%;
                bottom: 90%;
            }
            
            .moveLogo {
                animation-duration: 4s;
                animation-name: moveLogo;    
                -webkit-animation-name: moveLogo; 
                -webkit-animation-duration: 4s;
            }

            @keyframes moveLogo {
                0% {
                right: 0%;
                bottom: 0%;
            }
            25% {
                right: 17%;
                bottom: 22%;
            }
            50% {
                right: 34%;
                bottom: 45%;
            }
            75% {
                right: 51%;
                bottom: 68%;
            }
            100% {
                right: 69%;
                bottom: 90%;
            }
            }

            @keyframes opacityToVisible {
                0% {
                opacity: 0;
            }
            25% {
                opacity: 0.25;
            }
            50% {
                opacity: 0.50;
            }
            75% {
                opacity: 0.75;
            }
            100% {
                opacity: 1;
            }
            }
            @-webkit-keyframes moveLogo {
                0% {
                right: 0%;
                bottom: 0%;
            }
            25% {
                right: 17%;
               ...

JavaScript

var e = document.getElementById("imageUnibit");
        var eventName = navigator.appVersion.indexOf("WebKit") === -1 ? "animationend" : "webkitAnimationEnd";
        e.addEventListener(eventName, function(e) {
             var targetElement = typeof e.target != 'undefined' ? e.target : window.event.srcElement;
             targetElement.removeAttribute('class');
             var transparents = document.querySelectorAll(".transparent"); 
             for(var i = 0 ; i < transparents.length ; i++) {
                 transparents[i].removeAttribute('class');
                 transparents[i].setAttribute('class', 'nottransparent');
             }        
             var element = transparents[--i];
             element.addEventListener(eventName, function(e) {
             setInterval(function() {
                 var nottransparents = document.querySelectorAll(".nottransparent");
                 for(var i = 0 ; i < nottransparents.length ; i++) {
                     nottransparents[i].removeAttribute('class');
                     nottransparents[i].setAttribute('class', 'transparent');
                 }    
                 
                 this.setAttribute('class', 'moveLogo');
             }.bind(targetElement), 2000);                 
                 element.removeEventListener(eventName, arguments.callee);
             });
         }, true);