仅使用 CSS 加载时如何缩放元素？答案

【问题标题】：How to scale an element when it loads using only CSS?仅使用 CSS 加载时如何缩放元素？
【发布时间】：2015-03-24 14:43:12
【问题描述】：

我正在加载一个元素，其初始 css 值为：

.popOver {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: #d9dfe5;
  transition: all 2s ease-in-out; 
  transform: scale(0,0); 
}

当元素加载到页面中并查看转换时，我需要更改为 scale(1, 1)。有人可以帮忙吗？

【问题讨论】：

当元素加载时它会得到你写的css，如果你想让元素在之后（即在文档加载时）得到scale(1,1)，应该使用javascript（或jquery）。
@Xlander jQuery 不是必需的
@Mr.Alien，OP 想要动画？
@Xlander 是的 - 当元素加载到页面中并看到转换时据我了解
@Mr.Alien，好吧，那没关系。

标签： html css transform scale

【解决方案1】：

transition 将在您加载页面的那一刻应用，因此在您的情况下这不是一个理想的解决方案，您需要的是 CSS @keyframes，您需要将 scale(0,0) 设置为 class 然后 @ 987654326@ for 100% 因为 关键帧 将在页面完全加载后拍摄。

Demo （稍微重构了代码并添加了animation-fill-mode，以防止弹出窗口缩小到0，因此使用rev 2）

.popOver {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: #d9dfe5;
    -webkit-animation: bummer 2s;
    animation: bummer 2s;
    -webkit-transform: scale(0,0); 
    transform: scale(0,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards; /* Add this so that your modal doesn't 
                                      close after the animation completes */
}

@-webkit-keyframes bummer {
    100% {
        -webkit-transform: scale(1,1); 
    }
}

@keyframes bummer {
    100% {
        transform: scale(1,1); 
    }
}

正如我之前解释的，我将元素的初始比例设置为0,0，然后使用关键帧将其设置为1,1。可以通过调整 2s 来控制动画的时间，这不过是 2 秒。

【讨论】：