CSS卡片折叠边缘动画在Edge闪烁、方向错误，求修复与简化实现方案

我来帮你搞定这两个问题，顺便分享一个更稳妥的实现方式：

一、消除白色三角区域的边框闪烁 #

边框闪烁通常是因为动画过程中浏览器频繁重绘元素，或是用border模拟三角时的渲染bug。试试这两个方案：

1. 开启硬件加速 #

给三角伪元素添加以下CSS，让GPU接管渲染，减少重绘闪烁：

.widget-allow-new::after {
  backface-visibility: hidden;
  transform: translateZ(0);
}

2. 替换border绘制三角的方式 #

如果之前是用border-top/border-left这类方式模拟白色三角，建议改用clip-path绘制，彻底避免border带来的渲染问题：

.widget-allow-new::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #fff;
  /* 用clip-path绘制右下角三角 */
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

二、修复Edge浏览器的动画方向错误 #

这个问题分两种情况，对应不同的解决方法：

1. 针对Chromium内核的Edge（新版） #

检查你的transform-origin设置，确保动画的变换原点是右下角：

.widget-allow-new::after {
  transform-origin: bottom right;
  /* 兼容旧版Edge的前缀 */
  -ms-transform-origin: bottom right;
}

如果还是方向错误，调整关键帧的旋转方向，比如把rotate(-90deg)改成rotate(90deg)，或者添加animation-direction: reverse;强制反转动画方向。

2. 针对旧版EdgeHTML内核的Edge #

用@supports做浏览器适配，单独给旧版Edge写动画关键帧：

/* 旧版Edge专属样式 */
@supports (-ms-ime-align: auto) {
  .widget-allow-new::after {
    animation: edge-fold 0.3s ease forwards;
  }
}

@keyframes edge-fold {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

三、更简便的折叠动画实现方式 #

推荐用transform: rotate配合overflow: hidden来实现，代码更简洁，动画更稳定，还能避免各种渲染bug：

body {
  background: #FFA;
}

.widget-allow-new {
  background: #31682F;
  position: relative;
  width: 300px;
  height: 100px;
  margin: 1.5em;
  overflow: hidden; /* 隐藏超出卡片的三角部分 */
}

.widget-allow-new::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: #fff;
  transform-origin: bottom right;
  animation: fold-card 0.5s ease forwards;
  /* 开启硬件加速，防止闪烁 */
  backface-visibility: hidden;
  transform: translateZ(0);
}

@keyframes fold-card {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-90deg); }
}

/* 旧版Edge适配 */
@supports (-ms-ime-align: auto) {
  .widget-allow-new::after {
    animation: edge-fold-card 0.5s ease forwards;
  }
}

@keyframes edge-fold-card {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(90deg); }
}

这个方案通过旋转右下角的白色方块，配合卡片的overflow: hidden，模拟出折叠边缘的效果，逻辑清晰，几乎不会出现渲染问题。

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