时间戳

首页 > 解决方案 > 我想从关键帧开始动画按钮单击

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

问题描述

任何人都可以提交一些提示如何做到这一点？所以不是页面加载，而是在按钮单击后制作动画。因此，每个 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>

标签： javascripthtmlcss

解决方案

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

CSS 语法：

动画播放状态：暂停 | 运行 | 初始 | 继承;

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

来自 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>

推荐阅读