如何实现图像旋转与缩放的复合过渡动画-js教程-PHP中文网

如何实现图像旋转与缩放的复合过渡动画

本文介绍一种稳定可靠的 CSS + JavaScript 方案，通过分离旋转与缩放动画层级（父容器负责旋转、子元素独立执行缩放关键帧），解决 transform 链式写法（如 scale(4) rotate(...) scale(0.25)）在多次触发时失效的问题。

本文介绍一种稳定可靠的 css + javascript 方案，通过分离旋转与缩放动画层级（父容器负责旋转、子元素独立执行缩放关键帧），解决 `transform` 链式写法（如 `scale(4) rotate(...) scale(0.25)`）在多次触发时失效的问题。

在 CSS 动画中，直接对同一 transform 属性连续设置多个复合值（例如 'scale(4) rotate(90deg) scale(0.25)'）会导致浏览器难以正确插值——尤其是当 scale 值被重复覆盖时，transform 的矩阵计算会因中间状态丢失而中断过渡，造成“仅首次生效”的典型问题。

推荐解法：职责分离 + 自定义属性驱动

核心思想是将旋转和缩放拆分到不同 DOM 层级与动画机制中：

导航菜单源码，纯css动画效果代码案例下载

这是一款实用的导航菜单源码，纯css动画效果代码案例下载，点击图标导航，可实现选择移动的动画效果，简单实用，适用于任意类型的移动端网站。

下载

使用
作为旋转容器，通过 CSS 自定义属性 --rotate 控制累积角度，并借助 calc(var(--rotate) * 1deg) 实现声明式旋转；
图像本身不参与 transition，而是通过 .img-wrapp.animated img 触发独立的 @keyframes rotate 动画，专注执行缩放序列（放大 → 缩小 → 恢复）。

✅ 完整可运行示例：

<button>Turn the image</button>
<div class="img-wrapp">
  @@##@@
</div>

.img-wrapp {
  --rotate: 0;
  display: inline-block;
  transition: transform 2s ease-in-out;
  transform: rotate(calc(var(--rotate) * 1deg));
}

.img-wrapp.animated img {
  animation: zoom-pulse 2s both;
}

@keyframes zoom-pulse {
  0%   { transform: scale(1); }
  33%  { transform: scale(4); }
  66%  { transform: scale(0.25); }
  100% { transform: scale(1); }
}

document.querySelector('button').addEventListener('click', () => {
  const wrapper = document.querySelector('.img-wrapp');
  // 防止快速连点导致动画冲突
  if (wrapper.classList.contains('animated')) return;

  const current = parseFloat(getComputedStyle(wrapper).getPropertyValue('--rotate'));
  wrapper.style.setProperty('--rotate', current + 90);
  wrapper.classList.add('animated');

  // 动画结束后清理类名，允许下一次触发
  setTimeout(() => wrapper.classList.remove('animated'), 2000);
});

? 关键注意事项：