Предотвращение мерцания при наведении CSS-преобразования - PullRequest
Новая
       5

Предотвращение мерцания при наведении CSS-преобразования

0 голосов
/ 03 февраля 2019

При наведении курсора на вертикально вращающийся якорь, если мышь находится не в центре изображения, анимированное преобразование мерцает с использованием следующего кода: 

@keyframes spin {0% {transform: rotateX(0deg);} 100% {transform: rotateX(360deg);}}
a:focus, a:hover {animation: spin 0.9s 1 linear;}

Как предотвратить мерцание без изменения HTML-кода?

https://jsfiddle.net/jabcreations/ahcx0wfv/

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Идея без изменения html состоит в том, чтобы переместить анимацию в псевдоэлемент, и вы избежите потери при наведении, поскольку основной элемент не будет вращаться:

Вы также можете упростить свою логику, используя переходвместо анимации: 

p a {
  color: #000;
  display: inline-block;
  height: 50px;
  z-index:0;
  position:relative;
  color:transparent;
}
p a:before {
  content:attr(data-text);
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  color:#000;
  transition:transform 0.9s linear;
}
p a:focus::before,
p a:hover::before {
  transform: rotateX(360deg);
  background: radial-gradient(ellipse at center, #777 0%, #222 100%);
  color: #fff;
}
<p>some content here <a href="admin/" data-text="Admin">Admin</a> and more here</p>
0 голосов
/ 03 февраля 2019

Чтобы избежать получения :hover из a и мерцания, вы можете переместить :hover из a к его родителю: 

@keyframes spin {
  100% {
    transform: rotateX(360deg);
  }
}

ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

li:hover {
  cursor: pointer;
}

a:focus,
li:hover a {
  animation: spin 0.9s 1 linear;
}

ul a {
  color: #000;
  display: inline-block;
  height: 50px;
}

ul a:focus,
ul li:hover a {
  background-image: radial-gradient(ellipse at center, #777 0%, #222 100%);
  color: #fff;
}
<ul>
  <li><a href="admin/">Admin</a></li>
  <li><a href="appointments/">Appointments</a></li>
  <li><a href="blog/">Blog</a></li>
  <li><a href="calendar/">Calendar</a></li>
  <li><a href="contact/">Contact</a></li>
  <li><a href="events/">Events</a></li>
  <li><a href="forms/">Forms</a></li>
  <li><a href="forums/">Forums</a></li>
  <li><a href="guestbook/">Guestbook</a></li>
  <li><a href="mail/">Mail</a></li>
  <li><a href="members/">Members</a></li>
  <li><a href="newsletter/">Newsletter</a></li>
  <li><a href="notifications/">Notifications</a></li>
  <li><a href="search/">Search</a></li>
</ul>
...