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>
相关推荐
前端卧龙人3 分钟前
受够了webpack的速度,我选择了vite重构vue2项目
前端
巛、10 分钟前
ES6面试题
前端·面试·es6
周全全36 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九1 小时前
html、css(javaweb第一天)
前端·css·html
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿2 小时前
《开篇:课程目录》
前端·c#
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js