CSS动画问题：让红色方块从scale(100)缩至scale(1)且初始不显示原尺寸

要实现红色方块从scale(100)缩放到scale(1)且动画开始前不显示原尺寸，你需要调整元素初始状态和动画关键帧，具体如下：

核心问题分析 #

• 元素初始状态默认是scale(1)，加上动画有1秒延迟，延迟期间会显示原尺寸。
• CSS动画中display: none无法在关键帧中生效，不能用来隐藏初始状态。

具体修改步骤 #

1. 设置元素初始状态：直接把元素的初始样式设为transform: scale(100)和opacity: 0，这样动画开始前就保持缩放后的隐藏状态。
2. 调整动画关键帧：让动画从scale(100)过渡到scale(1)，同时控制opacity从0变为1再到0（如果需要最终隐藏的话）。
3. 简化CSS前缀：现在主流浏览器已支持标准CSS动画语法，可以去掉-webkit-前缀，提升兼容性。

修改后的代码示例 #

CSS #

.container .box {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 0 auto;
  /* 设置初始状态为scale(100)且透明 */
  transform: scale(100);
  opacity: 0;
  /* 标准动画写法 */
  animation-name: shrinkit;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes shrinkit {
  0% {
    transform: scale(100);
    opacity: 1; /* 动画开始时显示 */
  }
  100% {
    transform: scale(1);
    opacity: 0; /* 动画结束时隐藏，可根据需求调整 */
  }
}

HTML #

<div class="container">
  <div class="box"></div>
</div>

说明 #

• 初始状态设置scale(100)和opacity:0，确保动画延迟期间元素不会以原尺寸显示。
• 动画关键帧从scale(100)过渡到scale(1)，同时控制透明度变化，实现从大到小的缩放效果。
• 如果不需要动画结束后隐藏，可把100%里的opacity:0改成opacity:1。

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