延迟时间后自动填充颜色- svg

Question

我想要自动填充颜色后，一个固定的延迟时间(在动画之后)，现在颜色只填充在悬停，只有当我们点击它。

我想在延迟时间后自动填充颜色。

.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

查看CSS动画上的博客条目：http://www.sitepoint.com/css3-animation-javascript-event-handlers/

作者建议css将根据您感兴趣的css动画状态触发Javascript事件。因为您对动画的结尾感兴趣，所以可以使用“动画结束”事件。因此，您应该能够简单地修改Javascript如下：

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