Home / Questions / 258605
Accepted
Shassain
Asked: 2020-04-26 18:32:33 +0800 CST 2020-04-26 18:32:33 +0800 CST

transition css, make the background flicker

  • 772

I have the following code:

#cajanumeral {
    height: 220px;
    margin:1em auto; 
    text-align: center;
    width: 300px;
    display: table;
    background-color: #0000ff;
  }
  #cajahijo:hover {
    box-shadow: 325px 0 #330000 inset;
    color: #fff;
  }
  #cajahijo{
    flex: auto;
    -webkit-transition: all 1s;
    box-shadow: 10px 0 #330000 inset;
    display: table-cell;margin: 0; padding: 0 1em;vertical-align: middle;font-size: 50px;color:#ffff00
  }
<div id="cajanumeral" >
      <div id="cajahijo">
        37
      </div>
    </div>

As you will see the result at the end of the transition flickers horribly, how do I make this not happen?

css

2 Answers

  1. It's a chrome bug that happens to a lot of people. The closest thing to a solution is to add a 0.01px to the box-shadow (no idea why). Even so, from time to time it still happens, but it is much less.

    #cajanumeral {
    height: 220px;
    margin:1em auto; 
    text-align: center;
    width: 300px;
    display: table;
    background-color: #0000ff;
  }
  #cajahijo:hover {
    box-shadow:325px 0 0 0 #330000 inset;
    color: #fff;
  }
  #cajahijo{
    flex: auto;
    -webkit-transition: all 1s;
    box-shadow:10px 0 0 0.01px #330000 inset;
    display: table-cell;
    margin: 0; 
    padding: 0 1em;
    vertical-align: middle;
    font-size: 50px;
    color:#ffff00
  }
    <div id="cajanumeral" >
      <div id="cajahijo">
        37
      </div>
    </div>

    I hope it helps you, greetings!

    • 2
  2. Best Answer

    I have managed to do what you want without blinking, instead of playing with the shadow of the box, I have done it with the width of the child box.

    I have changed the colors to better differentiate the boxes

        #cajanumeral {
        height: 220px;
        margin:1em auto; 
        text-align: center;
        width: 300px;
        background-color: black;
      	display:flex;
        align-items: center;
      }
      #cajahijo{
      	border: solid red 1px;
        width:5%;
        height:100%;
      	color: white;
      	-webkit-transition: all 1s;
      	background: red;
      }
      #cajanumeral:hover #cajahijo {
      	width: 100%;
      }
    	#vuela{
      		//border: solid green 1px;
      		position: absolute;
      		margin-top: 2$;
      		color: white;
          display: flex;
          justify-content: center;
          align-items: center;
      		font-size: 350%;
          margin-left: 18%;
    	}
        <div id="cajanumeral" >
      	  <div id="vuela">
          	37
      	  </div>
          <div id="cajahijo">
          </div>
        </div>

    • 1