CSS3 @keyframes + animation 可高效实现轻量广告动效，优于JS；需设 animation-fill-mode: forwards，优先用 transform 而非 width/height 动画，轮播须防卡顿与错位，注意兼容性坑。
直接用 CSS3 @keyframes + animation 就能做出轻量、高性能的动态广告，不需要 JS 也能跑通大部分场景。Canvas 或 Web Animations API 适合复杂交互，但日常横幅、弹窗、轮播广告，CSS 足够且更稳。
用 @keyframes 写滑入+淡入横幅广告
这是最常用也最容易出效果的方式。关键不是“动起来”，而是动得自然、不卡、不闪跳。
- 必须设
animation-fill-mode: forwards，否则动画一结束元素就回退到初始状态（比如突然消失或跳回原位） - 起始帧用
transform: translateX(-100px)比left: -100px更安全——transform不触发重排，性能好，移动端也稳 - 别对
width或height做动画，尤其当值是auto时，transition和animation都会失效；改用transform: scaleX()或scaleY() - 示例片段：
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ad-banner {
animation: slideInUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
用 transition 实现悬停高亮与缩放
适用于按钮类广告、CTA 区域、图片标签等需要响应用户操作的部位。比 @keyframes 更轻、更可控。
- 只对支持过渡的属性生效：
opacity、transform、color、background-color等；display、z-index、font-size（部分浏览器）不行 - 写多个属性过渡时，用逗号分隔，别漏掉单位：比如
transition: opacity 0.2s, transform 0.3s，不能写成transform 0.3 - 移动端要加
cursor: pointer，否则 iOS Safari 可能不触发:hover；更稳妥的做法是用 JS 切换 class - 悬停放大别超过
scale(1.1)，再大容易糊边或压到其他内容
轮播广告自动切换怎么防卡顿
常见问题不是“切不动”，而是切到一半卡住、图片错位、定时器叠加导致加速播放。核心是控制节奏和清理旧状态。
立即学习“前端免费学习笔记（深入）”；
- 用
setInterval+setTimeout混合不如直接用requestAnimationFrame驱动，尤其在低帧率设备上更准 - 每次切换前先移除当前
.active类，再给目标加 —— 否则可能两个图同时显示或透明度叠加出灰度 - 图片加载未完成时就执行淡入动画，会导致“白块闪一下”，建议监听
img.onload或用loading="lazy"+IntersectionObserver分阶段加载 - 轮播容器必须设
overflow: hidden，否则动画移出区域的内容会露出来（尤其用translateX横向滚动时）
广告动效容易被忽略的兼容性坑
不是所有“看起来能动”的写法，在真实环境里都可靠。几个高频翻车点：
-
will-change: transform能提性能，但别滥用——长期开启会吃内存，iOS Safari 有渲染异常风险；建议动画开始前加，结束回调里用 JS 移除 -
animation-play-state: paused在微信内置浏览器（X5 内核）里对@keyframes支持不全，暂停后恢复可能失步；改用 class 控制显隐更稳 - 使用
transform: translateZ(0)强制 GPU 加速，在某些 Android 低版本 WebView 里反而引发闪烁；优先用translate3d(0,0,0)并测试真机 - 广告嵌在 iframe 里时，父页面滚动可能触发子页面的
scroll事件，但 Intersection Observer 不会跨 iframe 自动工作，得手动通信或改用getBoundingClientRect()判定可视性
