延迟时间后自动填充颜色 - 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', 函数() { this.classList.toggle('clickit'); });

Answer 1

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

作者建议 css 将根据您感兴趣的任何 css 动画状态触发 Javascript 事件。既然您对动画结束感兴趣，您可以使用'animationend' 事件。所以你应该能够像这样简单地修改你的Javascript：

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

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

Automatically fill color after a delay time - svg

css

svg

svg-animate