Migotanie elementów zawartości okienka przy zastosowaniu transition i transform

Oto fragment CSS:

}
.strona_prawa .mw-sticky-y.spis:not(:hover){
  transform: scale(0.3,0.3) translate(117%,-117%);
  /**/	
  transition: transform, max-width, width, max-height, height 500ms ease-out, linear;
  transition-property: transform, max-width, width, max-height, height;
  transition-duration: 500ms;
  transition-timing-function: ease-out, linear;
  transition-delay:3s;
}
.strona_prawa .mw-sticky-y.spis:hover{
  max-width:700px !important;
  transition: transform, max-width, width, max-height, height 500ms ease-out, linear;
  transition-property: transform, max-width, width, max-height, height;
  transition-duration: 500ms;
  transition-timing-function: ease-out, linear;
  transition-delay: 0s;
}

Przy tym zastosowałem do tego również JS, ale z tym nie powinno być problemów. Powyższy kod opisuje okienko. Przy użyciu powyższego kodu zaobserwowałem migotanie zawartości okienka, a właściwie z nim tekstu i niektórych elementów okienka przy wychodzeniu wskaźnika myszki na zewnątrz i do wewnątrz okienka, jaki jest z tym problem, jak to rozwiązać, aby nie było migotania?

Weź zrób z tego jakiś jsfiddle czy codepen, bo tak nie widać. Co najwyżej ktoś mógłby się domyślić, jak miał podobny problem.

Ja kiedyś miałem coś podobnego, ale nie wiem, czy jest to akurat ten przypadek i czy moje rozwiązanie będzie tu odpowiednie.

.mw-sticky-y.spis:not(:hover){

po co :not(:hover)? Wiesz, że brak hoveru jest domyślny?

max-width:700px !important;

po co !important?

Już rozwiązałem problem w postaci css:

.strona_prawa .mw-sticky-y.spis:not(:hover){
  transform: scale(0.3,0.3) translate(117%,-117%);
  /**/	
  transition: transform, max-width, width, max-height, height 500ms ease-out, linear;
  transition-property: transform, max-width, width, max-height, height;
  transition-duration: 500ms;
  transition-timing-function: ease-out, linear;
  transition-delay:3s;
}
.strona_prawa .mw-sticky-y.spis:hover{
  max-width:700px !important;
  transform: scale(1,1) translate(0,0);
  transition: transform, max-width, width, max-height, height 500ms ease-out, linear;
  transition-property: transform, max-width, width, max-height, height;
  transition-duration: 500ms;
  transition-timing-function: ease-out, linear;
  transition-delay: 0s;
}

Już nie ma migotania, a było. Pytanie, czy brak tożsamościowego transform: scale(1,1) translate(0,0); może powodować pojawienie się migotania, a przecież to jest tożsame z operacją jedności, więc, co jest tutaj grane?

Już nie ma migotania, a było. Pytanie, czy brak tożsamościowego transform: scale(1,1) translate(0,0); może powodować pojawienie się migotania, a przecież to jest tożsame z operacją jedności, więc, co jest tutaj grane?

Nie wiem czemu był "efekt migotania", ale spróbuj ograniczyć transition do samej właściwości transform bo do zmiany rozmiaru / pozycji elementu powinno to w tym wypadku wystarczyć.

.strona_prawa .mw-sticky-y.spis {
  transform: scale(0.3,0.3) translate(117%,-117%);
  transition: transform 0.5s ease-out 3s;
}

.strona_prawa .mw-sticky-y.spis:hover{
  max-width:700px !important;
  transform: scale(1,1) translate(0,0);
  transition: transform 0.5s ease-out;
}

Animowanie właściwości takich jak width / height / max-width / min-width / max-height / min-height jest stanowczo wolniejsze od animowania samego transform chociaż pozwala ono uzyskać ten sam efekt.