javascript - 我想让关键帧的动画从单击按钮开始

Question

<分区>

Answer 1

您可以使用 CSS animation-play-state 属性。此属性指定动画是正在运行还是已暂停。

CSS 语法:

animation-play-state: paused | running | initial | inherit;

在 JavaScript 中，可以查询它以确定动画当前是否正在运行。此外，您可以使用 JavaScript 设置它的值来暂停或恢复播放动画。 恢复暂停的动画将从暂停时停止的地方开始播放动画，而不是从动画序列的开头重新开始。

More information from MDN

示例:

function run() {
    var list = document.getElementsByClassName( 'fade-in' );

    list[0].style.animationPlayState = 'running';
    list[1].style.animationPlayState = 'running';
    list[2].style.animationPlayState = 'running'
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0;
    -webkit-animation: fadeIn ease-in 1;
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;

    /* Pause animation */
    animation-play-state: paused
}

.fade-in.one {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay: 0.7s;
    animation-delay: 1s /* Start mezi jednotlivými elementy */
}

.fade-in.two {
    -webkit-animation-delay: 0.7s;
    -moz-animation-delay:0.7s;
    animation-delay: 2s /* Start mezi jednotlivými elementy */
}

.fade-in.three {
    -webkit-animation-delay: 2.7s;
    -moz-animation-delay: 2.7s;
    animation-delay: 3s /* Start mezi jednotlivými elementy */
}

<input type="button" value="Click Me" onclick="run()"></input>

<table width="100%" class="container">
    <td width="33%" class="fade-in one">
        <img width="100%" src="http://www.google.com/intl/en_ALL/images/logo.gif">
    </td>
    <td width="33%" class="fade-in two">
        <img width="100%" src="http://www.google.com/intl/en_ALL/images/logo.gif">
    </td>
    <td width="33%" class="fade-in three">
        <img width="100%" src="http://www.google.com/intl/en_ALL/images/logo.gif">
    </td>
</table>