凉薄非本意 2022-09-26 17:04 采纳率: 70%
浏览 43
已结题

css平移如何中途暂停

img


我想知道css的平移动画如何暂停呢？我百度看说用

animation-play-state:paused;

的，但是我这个平移是动态的，没有办法写在@keyframes里啊
我现在是在暂停的事件中获取下降的距离然后取消元素的平移属性，再把下降的距离赋给元素，但是这样会有一个问题就是当设备的运算处理能力不足时会看到一个明显的上拉动作（这里的上拉我知道是因为取消平移效果后元素会回到原来的位置，然后又赋值了新的距离，所以在运算能力不足的设备上这个上拉效果尤为明显）

  • 写回答

3条回答 默认 最新

  • MAXLZ 2022-09-26 17:19
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      top: 100px;
      position: fixed;
      width: 100px;
      height: 100px;
      background: red;
      animation: move 3s linear 0s infinite alternate;
    }
    
    .stop {
      animation-play-state: paused !important;
    }
    
    @keyframes move {
      from {
        left: 0;
      }
      to {
        left: calc(100% - 100px);
      }
    }
  </style>
</head>
<body>
<button id="btn">change animation</button>
<div id="box"></div>
<script>
  const box = document.getElementById('box')
  document.getElementById('btn').addEventListener('click', function () {
    if (box.classList.contains('stop')) {
      box.classList.remove('stop')
    } else {
      box.classList.add('stop')
    }
  })
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 10月6日
  • 已采纳回答 9月28日
  • 修改了问题 9月26日
  • 创建了问题 9月26日

悬赏问题

  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog
  • ¥15 Excel发现不可读取的内容
  • ¥15 关于#stm32#的问题：CANOpen的PDO同步传输问题