我想通过按钮点击从关键帧开始制作动画

Question

任何人都可以提交一些提示怎么做？因此，它不是页面加载，而是在按钮点击后生成动画。 因此，每个td都拥有自己的关键帧，并在一定时间内对其进行设置，这是否定的。

            @-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;
            }

            .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 */

            </style>

            <table width="100%" class="container">
              <td width="33%" class="fade-in one">
                <img width="100%" src="sekerko.png">
              </td>

              <td width="33%" class="fade-in two">
                <img width="100%" src="miko.png">
              </td>

              <td width="33%" class="fade-in three">
                <img width="100%" src="lakyrka.png">
              </td>
            </table>

Answer 1

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

CSS语法：

  

动画播放状态：暂停|跑步|初始|继承;

在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>