css动画添加间隔

方寸不乱步稳行

已于 2024-04-19 12:45:41 修改

阅读量1k

点赞数 19

文章标签： css 前端

于 2024-04-16 13:14:17 首次发布

本文链接：https://blog.csdn.net/m0_46312541/article/details/137821315

版权

本文介绍了如何在使用animate.css库的情况下，通过JavaScript监听animationend事件和结合animation-play-state设置负延迟，实现在HTML元素上实现动画的重复播放并自定义间隔。

摘要由CSDN通过智能技术生成

前言

因项目需要，需要在元素上实现动画重复播放，并且需要自定义动画间隔。
一开始想到的是animation-delay，但这个只有在第一次动画开始的时候才生效

在网上找了很多方法，最终的方法基本都是改动画规则，比如

@keyframes move{
       /*  此处从75%开始 */
      75%{ transform: translateX(0px);}
      100%{ transform: translateX(100px);}
}

例如设置animation-duration总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画，相当于就实现了每间隔3秒

但这个满足不了我的需求，我们使用的是animate.css库，不方便直接去修改keyframes

下面是用js实现的俩种方式：

监听`animationend` 事件

当 CSS 动画播放时，可能会发生三个事件：
animationstart - 当 CSS 动画开始时触发
animationiteration - 当 CSS 动画重复时触发
animationend - 当 CSS 动画完成时触发

所以我们只需要监听animationend事件完成时重新触发动画就行

// 下面是html 
<div id="test" class="animate__animated animate__bounce">Example</div>
// js 
let testDom = document.getElementById('test')
let intervalTime = 6
testDom.addEventListener('animationend', function(event) {
  // 移除再添加动画样式  重新触发动画
  testDom.classList.remove('animate__bounce')
  setTimeout(()=>{
    testDom.classList.add('animate__bounce')
  },intervalTime * 1000)
});

结合`animation-play-state`设置 `animation-delay` 为负值

animation-delay 其实是可以设置为负值的，设置负值的动画会立即执行,负值设置多少，动画跳过多少秒进入动画周期。

比如设置 -1s 时，动画就会从 1s 开始执行。此时如果我们再加上animation-play-state 为pause,那么延迟设置为 -1s 时，动画就停留 1s 时的状态。然后使用js结合一个timer就可以计算在每个时刻动画的状态。

直接看demo，先设置animation-play-state:paused暂停动画，然后调用setAnimateInterval执行

<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <style>
      #test {
        animation-play-state:paused;
      }
    </style>
  </head>
  <body>
    <h1 id="test" class="animate__animated animate__rubberBand">This is a simple animation!</h1>
    <script>
      const testDom = document.getElementById('test')
      function setAnimateInterval(target, intervalTime) {
        // 单位转毫秒
        intervalTime = intervalTime * 1000
        // 获取动画时间
        let durationTime = window.getComputedStyle(target).getPropertyValue('animation-duration');
        // 去掉单位转换为数字
        durationTime = new Number(durationTime.replaceAll('s','')) * 1000
        // 设置动画时间
        const startTime = new Date().getTime();
        window.requestAnimationFrame(function animate() {
          const currentTime = new Date().getTime();
          const time = (currentTime - startTime) % (intervalTime + durationTime)
          // 判断是处于动画时间内还是间隔时间内
          if (time <= durationTime) {
           	target.style.animationDelay = `-${time/1000}s`;
          } 
          window.requestAnimationFrame(animate);
        });
      }
      setAnimateInterval(testDom, 6)
    </script>
  </body>
</html>

方寸不乱步稳行

关注

19
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
css动画添加间隔

因项目需要，需要在元素上实现动画重复播放，并且需要自定义动画间隔。一开始想到的是，但这个只有在第一次动画开始的时候才生效在网上找了很多方法，最终的方法基本都是改动画规则，比如/* 此处从75%开始 */例如设置总动画设为4秒，然后前75%也就是3秒都没变化（0-75%），之后的25%也就是1秒做动画，相当于就实现了每间隔3秒但这个满足不了我的需求，我们使用的是animate.css库，不方便直接去修改keyframes。
复制链接

扫一扫