Странное наложение / мерцание на css анимации

Question

когда я анимирую простой круг, я получаю странное мерцание сбоку - как будто что-то пытаешься сделать изнутри sh - и я не могу понять, почему. Это также происходит, когда я использую ключевые кадры для анимации и в разных браузерах.

Любая помощь приветствуется.

.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>

Answer 1

Я думаю, что ваша проблема похожа на это. CSS Преобразование прерывания анимации

Удаление преобразования (-50%, -50%) убирает мерцание, поэтому я центрировал ваш div по-другому, и он выглядит нормально.

.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>