css动画添加间隔

前言

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

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

css 复制代码
@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事件完成时重新触发动画就行

javascript 复制代码
// 下面是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-statepause,那么延迟设置为 -1s 时,动画就停留 1s 时的状态。然后使用js结合一个timer就可以计算在每个时刻动画的状态。

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

html 复制代码
<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) {
            const percent =  time / durationTime;
            target.style.animationDelay = `-${percent}s`;
          } 
          window.requestAnimationFrame(animate);
        });
      }
      setAnimateInterval(testDom, 6)
    </script>
  </body>
</html>
相关推荐
why技术1 分钟前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪37 分钟前
JQ常规面试题
前端·javascript·面试
海上彼尚38 分钟前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index1 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
Shimeng_19891 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
一只一只妖2 小时前
前端导出带有合并单元格的列表
前端
lilye662 小时前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析
前端 贾公子2 小时前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
开始编程吧3 小时前
【HarmonyOS5】鸿蒙×React Native:跨端电商应用的「双引擎」驱动实践
前端
m0_746177193 小时前
小白进阶shell学习-----脚本实战案例
前端·chrome·学习