CSS запуск и приостановка анимации при наведении - PullRequest
Новая
       85

CSS запуск и приостановка анимации при наведении

0 голосов
/ 21 октября 2018

Я пытаюсь получить этот код , чтобы приостановить анимацию и НЕ вернуться назад после завершения, пока я нахожусь над div.Я хочу, чтобы он оставался квадратным, пока я нахожусь над ним.

Я искал вокруг и нашел этот вид паузы, но он не переводится в мой код. 

/*HTML*/
 <div class="pers">
/*CSS*/
.pers{
 margin-bottom: -4px;
 width: 300px;
 height: 300px;
 display: inline-block;
 background-color: green;
 clip-path: polygon(50% 52%, 100% 0, 100% 100%, 0% 100%);
}
.pers:hover{
 animation: polygons 1s;
 animation-fill-mode: forwards;
}
@keyframes polygons {
 75% 
{
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

О, вы действительно близки к этому.Просто нужно добавить ключевой кадр для состояния 100%.

.pers {
  margin-bottom: -4px;
  width: 300px;
  height: 300px;
  display: inline-block;
  background-color: green;
  clip-path: polygon(50% 52%, 100% 0, 100% 100%, 0% 100%);
}

.pers:hover {
   animation: polygons 1s;  
   animation-fill-mode: forwards;
}

@keyframes polygons {
  75%,100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
<div class="thisUs">
      <div class="pers">
    </div>
0 голосов
/ 21 октября 2018

анимация должна быть определена в состоянии без наведения.Вы также должны определить шаг 100% анимации, чтобы вы могли сохранить его, иначе начальный полигон будет рассматриваться как последний шаг анимации: 

.pers {
  margin-bottom: -4px;
  width: 300px;
  height: 300px;
  display: inline-block;
  background-color: green;
  clip-path: polygon(50% 52%, 100% 0, 100% 100%, 0% 100%);
  animation: polygons 1s forwards paused;
}

.pers:hover {
   animation-play-state:running;
}

@keyframes polygons {
  75%,100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}
<div class="pers">
</div>
...