异常的CSS过渡行为。 您可以禁用特定参数吗？

Question

I'm using a transition on elements of a table in order to provide a pretty cool border effect, this all works fine.

The problem I'm getting is that occasionally (not every time) on page refresh each individual box will transition in as if all of the variables are blank and will resize from (presumably) height 0 width 0 to height 250 and width 250. It looks incredibly ugly and kinda ruins the whole effect of the site.

My presumption is that, for whatever reason, the transition all catch is misinterpreting some variables as being null or zero, then transitioning from that to 250. However I can't test this as, as far as I know, you cannot make an exception for width and height.

I've tried manually setting a transition for the six important parameters (outline, outline-offset, color, background-image, background-position, background-size) but this simply results in the transition not working correctly, the background image simply snaps on and off with no transitions at all... so something must be going on.

Here is the code;

#portfolio-table td{
width: 250px;
height: 250px;
min-width: 250px;
min-height: 250px;

box-shadow: inset 0 0 50px 20px rgba(0,0,0,.35);

outline: 3px solid black;
outline-offset: -3px;

color: transparent !important; /* Makes text invisible until hover */

background-position:center;
background-repeat: no-repeat;
background-size: 100%;

text-align: center;

transition: all 1.5s ease-in-out;
    }

#portfolio-table td:hover{
outline: 10px solid white;
outline-offset: -10px;

color: black !important; /* Makes text visible */

box-shadow: inset 0 0 25px 10px rgba(0,0,0,.35);

background-image: url(../images/bg.jpg) !important;
background-repeat: no-repeat;
background-size: 100%;

cursor: pointer;

transition: all 0.5s ease-in-out;
    }

It might be important to note that background-image is being set by CSS per-cell. Heres the code for that;

#portfolio-table #project1{
background-image: url(../images/project7.jpg);
     }

There is a lot of repetition in the hover (for example the no-repeat and background-size) in an attempt to prevent this unusual behaviour.

As you can see a min-size is set for both width and height, but it still transitions in as if it was 0.

This is a link to a live example; if you spam refresh you should notice the effect.

Answer 1

You use

box-shadow: inset 0 0 25px 10px rgba(0,0,0,.35);

I have had this problem before and i solved it with changing the .35 to 0.35

Answer 2

I have changed the transition to

#portfolio-table td{

    ... 
transition: outline, outline-offset, color, box-shadow, background-image 1.5s ease-in-out;
}

and it works ok for me.