CSS轮播KeyFrame动画兼容问题：Chrome/Edge正常Firefox失效求解

轮播图Firefox失效原因 #

你当前的实现逻辑是通过修改绝对定位的.carousel__snapper的left属性，依靠Chromium内核（Chrome、Edge的底层内核）的非标准滚动捕捉兼容特性，锚点位置变化时触发父容器自动滚动，这个逻辑不符合CSS标准约定的表现，Firefox的滚动捕捉机制不会响应绝对定位子元素的偏移触发滚动，所以只会看到snapper自己动，父容器的滚动位置不变，图片自然不会跟着切换。加-moz-前缀没用是因为问题和前缀无关，完全是内核实现逻辑的差异。

解决方法也很简单，直接把动画绑定到滚动容器.carousel__viewport的scroll-left属性上，替代现在修改snapper偏移的方案，符合标准规范的写法所有主流浏览器都能正常兼容。

类选择器/nth-child不生效原因 #

你的导航按钮每个都包裹在独立的.carousel__navigation-item li元素里，直接给.carousel__navigation-button加nth-child选择器是找不到对应元素的：nth-child匹配的是同一个父元素下的同级元素，你的按钮都分别在不同的父节点下，当然选不到。只需要调整选择器层级，先选li的nth-child，再匹配里面的按钮就行，示例写法：

/* 替代原来的#nav1、#nav2、#nav3的写法 */
.carousel__navigation-item:nth-child(1) .carousel__navigation-button {
  animation: indicate 12300ms infinite -1000ms;
}
.carousel__navigation-item:nth-child(2) .carousel__navigation-button {
  animation: indicate 12300ms infinite 3100ms;
}
.carousel__navigation-item:nth-child(3) .carousel__navigation-button {
  animation: indicate 12300ms infinite 7200ms;
}
/* 对应的暂停动画选择器也同步调整即可 */

调整后就不需要依赖ID选择器绑定动画了。

内容的提问来源于stack exchange，提问作者DanCan