如何修复CSS动画中梯形过渡为矩形实现关门效果的异常问题

核心问题 #

你遇到的动画异常是关键帧属性不统一导致的：前90%的动画阶段你始终通过调整border-left宽度、left偏移量实现梯形展开效果，所有属性都和边框相关；但100%阶段突然删除边框配置、改用background+width实现矩形，两类属性的过渡逻辑不兼容，就会出现奇怪的形变。

解决方案 #

不需要切换属性实现逻辑，仅调整边框属性就能得到你要的闭合矩形效果，同时保证动画过渡丝滑：

1. 最终100%阶段将上下透明边框的宽度改为0、颜色改为和门一致的lightBlue，就能得到宽60px、高100px的纯色矩形
2. 修正#rectangle的定位属性，否则你设置的z-index不会生效（z-index仅对设置了position的元素生效）
3. 微调最终阶段的top偏移量，让门和门洞完全对齐

修改后的完整代码 #

CSS代码 #

#rectangle {
    width:60px;
    height:100px;
    background: black;
    margin: 20px;
    z-index: -30;
    position: relative; /* 新增：让z-index生效 */
}

#animate {
    border-bottom: 10px solid transparent; 
    border-left: 10px solid lightBlue;
    border-top: 10px solid transparent; 
    width: 0;
    height: 100px;
    position: relative;
    animation: example 2s forwards;
    left: 78px;
    top: 10px;
}  

@keyframes example {
  0%   {
    border-left: 10px solid lightBlue;
    left: 78px;
  }
  25%  {
    border-left: 20px solid lightBlue;
    left: 68px;
  }
  50%  {
    border-left: 30px solid lightBlue;
    left: 58px;
  }
  75%  {
    border-left: 40px solid lightBlue;
    left: 48px;
  }
  90% {
    border-left: 50px solid lightBlue;
    left: 38px;
  }
  100% {
    /* 上下边框宽度改为0，颜色改为门的颜色，消除透明部分 */
    border-bottom: 0 solid lightBlue; 
    border-left: 60px solid lightBlue;
    border-top: 0 solid lightBlue; 
    left: 28px;
    top: 20px; /* 微调top对齐门洞 */
  }  
} 

.shapes {
    text-align: center;
    margin: 0 auto;
    float: left;
}
/* 新增：容器加相对定位方便子元素对齐 */
.container {
    position: relative;
}

HTML代码 #

<div class="container">
  <div id="rectangle" class="shapes"></div>
  <div id="animate"></div>
</div>

注：代码中已删除各关键帧重复的不变属性（如width:0、height:100px等），动画会自动继承初始配置，逻辑不变的前提下代码更简洁。

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