Automatically fill color after a delay time - svg

Question

I want to automatically fill color after a fixed delay time (after the animation) Now color is filling only in hover and only when we click it..

I want to automatically fill color after a delay time

.st0{fill:#fff;;stroke:#282828;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

.st0 {
    stroke-dasharray: 2000;
    stroke-dashoffset:0;
    -webkit-animation: dash 4s linear forwards;
    -o-animation: dash 4s linear forwards;
    -moz-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

.st2{fill:#fff;;stroke:#282828;stroke-width:2;stroke-miterlimit:5;transition: .8s;}

.st2 {
    stroke-dasharray: 2000;
    stroke-dashoffset:0;
    -webkit-animation: dash 4s linear forwards;
    -o-animation: dash 4s linear forwards;
    -moz-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

    .st1{fill:#fff;;stroke:#20b21f;stroke-width:3;stroke-miterlimit:5;transition: .8s;}

.st1 {
    stroke-dasharray: 2000;
    stroke-dashoffset:0;
    -webkit-animation: dash 4s linear forwards;
    -o-animation: dash 4s linear forwards;
    -moz-animation: dash 4s linear forwards;
    animation: dash 4s linear forwards;
}

#logo {
cursor:pointer;
}

#logo:hover .st0 {
    fill:#282828;
    stroke: #282828;
    transition: .8s;
    stroke-opacity:0.0;
}

    #logo:hover .st1 {
    fill:#20b21f;
    stroke: #20b21f;
    transition: .8s;
    stroke-opacity:0.0;
}

    #logo:hover .st2 {
    fill:#282828;
    stroke: #282828;
    transition: .8s;
    stroke-opacity:0.0;
}

#logo.clickit .st0 {
    fill:#282828;
    stroke: #282828;
    stroke-opacity:0.0;
<!--    fill-opacity:0.0;-->
}
        #logo.clickit .st1 {
    fill:#20b21f;
    stroke: #20b21f;
    stroke-opacity:0.0;
<!--    fill-opacity:0.0;-->
}
    #logo.clickit .st2 {
    fill:#282828;
    stroke: #282828;
    stroke-opacity:0.0;
<!--    fill-opacity:0.0;-->
}

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

var clicker = document.querySelector('#logo'); clicker.addEventListener('click', function() { this.classList.toggle('clickit'); });

Answer 1

Check this blog entry on CSS animation: http://www.sitepoint.com/css3-animation-javascript-event-handlers/

The author suggests that css will fire Javascript events based on whatever css animation state you are interested in. Since you are interested in the end of the animation you can use the 'animationend' event. So you should be able to simply modify your Javascript like so:

var clicker = document.getElementById('logo');
clicker.addEventListener("animationend", function() {
    this.classList.toggle('clickit');
}, false);