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

Question

我正在加载一个初始 css 值为 :

的元素

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

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

Answer 1

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

Demo （稍微重构了代码并添加了 animation-fill-mode 以防止弹出窗口缩小到 0 所以使用版本 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 秒 .

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

How to scale an element when it loads using only CSS?

html

css

transform

scale