css - 延迟时间后自动填充颜色 - 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('点击', function() { 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);