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

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

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

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

transition将应用瞬间加载页面,这样是不是在你的情况的理想解决方案,你需要的是CSS @keyframes,你需要设置scale(0,0)的class,然后scale(1,1)用于100%为关键帧在页面完全加载后自动拍摄.

演示 (稍微重构代码并添加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秒.