Weird overlay / flicker on css animation

Issue

When I animate a simple circle I get a weird flicker on the side - like something tryingh to push inside - and I can't figure out why. It also happens when I use keyframes to animate and on different browsers.

Any help appreciated.

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
    box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
    overflow: hidden;
  background: #fff;
  color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #E56262;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
    z-index: 3;
}

.circle {
    background-color: #fff;
    width: 100px;
    height: 100px;
    border-radius:50%;
    box-shadow: 0px 0 15px 2px #424040;
    position: relative;
    z-index: 4;
    transition: all 1s;
    
}
.circle:hover {
        transform: scale(1.5);
    }

@keyframes scaleMe {
    0% {
        transform: scale(0%);
    }
    50% {
        transform: scale(100%);
    }
    100% {
        transform: scale(0%);
    }
}

<div class="frame">
  <div class="center">
        <div class="circle"></div>
  </div>
</div>

Solution

I think your problem is similar to this. CSS Animation break transform

Removing the transform(-50%, -50%) remove the flickering, so I centered your div in another way and it look's ok.

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: #fff;
  color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #E56262;
  display: flex;
}

.center {
  margin: auto;
	z-index: 3;
}

.circle {
	background-color: #fff;
	width: 100px;
	height: 100px;
	border-radius:50%;          
	box-shadow: 0px 0 15px 2px #424040;
	position: relative;
	z-index: 4;
	transition: all 1s;
}

.circle:hover {
		transform: scale(1.5);
}

  @keyframes scaleMe {
      0% {
          transform: scale(0%) translate(-50%,-50%);
      }
      50% {
          transform: scale(100%) translate(-50%,-50%);
      }
      100% {
          transform: scale(0%) translate(-50%,-50%);
      }
  }

<div class="frame">
  <div class="center">
		<div class="circle"></div>
  </div>
</div>

Answered By - Crocsx