형님들 밑에 코드가 자동슬라이드 내용이라는데 이미지가 전환 될 때마다 너무 번쩍거립니다.. 어지러운데 답을 못찾겠어요
번쩍거림을 막을 수 있는 방법 있을까요!?




* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}


.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


.text {
  color: #000000;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
 
}

.active {
  background-color: #717171;
}


.fade {
    transition-delay: 0.9s;
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
   
  }

@-webkit-keyframes fade {
  from {
    transform:  opacity(0);
   
}
  to {
    transform:  opacity(1);
   
 
}
}

@keyframes fade {
  from {
    transform:  opacity(0);
 
}
  to {
    transform:  opacity(1);

}
}