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

Question

I'm loading an element that has the initial css values of :

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

I need to change to scale(1, 1) when the element loads in the page and see the transition. Anyone can help?

Answer 1

transition will apply the moment you load the page so that is not an ideal solution in your situation, what you will need is CSS @keyframes where you need to set scale(0,0) to the class and then scale(1,1) for 100% as keyframes will shoot after the page is completely loaded.

Demo (Refactored the code a bit and added animation-fill-mode to prevent the popup from scaling back to 0 so using 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); 
    }
}

Here as I explained before, am setting the initial scale of the element to 0,0 and than am animating it to 1,1 using keyframes. The time of the animation can be controlled by tweaking the 2s which is nothing but 2 Seconds.