Переход линейной анимации при зависании - PullRequest
Новая
       8

Переход линейной анимации при зависании

0 голосов
/ 26 июня 2018

Я пытаюсь бесконечно крутить логотип SVG, как винил на проигрывателе, а затем замедлять / ослаблять анимацию при зависании, как, например, снятие иглы с плеера.

Однако я не могу понять, как сделать плавный переход при зависании.Есть идеи?

    @-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% {  
  transform:rotate(360deg); 
  } 
}

transition: all 1s ease;

&:hover {
 -webkit-animation:spin 1s linear infinite;
 -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}

1 Ответ

0 голосов
/ 26 июня 2018

Вы можете сделать это с парой :not(:hover) псевдокласс , которая запускает animation после того, как элемент равен "unhovered" , вместес элементом-оберткой , чей animation в противоположном направлении (-) обнуляет один из child при загрузке страницы.

Чтобы избежать каких-либо визуальных отклоненийи при несоответствиях используется и рекомендуется анимация-время из linear: 

.vinyl {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: repeating-radial-gradient(#fff, #fff 1px, #000 1px, #000 2px);
}

.vinyl:hover {
  animation: spin 1s linear infinite;
}

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

.vinyl:not(:hover) {
  animation: stop 2s ease-out;
}

@keyframes stop {
  100% {transform: rotate(360deg)}
}

span {
  display: inline-block; /* required */
  animation: nullify 2s ease-out;
  background: #ddd; /* just for demo */
}

@keyframes nullify {
  100% {transform: rotate(-360deg)}
}
<span>
  <div class="vinyl"></div>
</span>
...