Question

＆＃13;

@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.hvr-pulse-grow {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.hvr-pulse-grow:hover,
.hvr-pulse-grow:focus,
.hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>
    ALBERT
  </title>
  <link rel="stylesheet" type="text/css" href="tes.css">
</head>

<body>
  <div class="hvr-pulse-grow"></div>
</body>

</html>

＆＃13;

这种效果很好但是我可以添加transition以便在我将鼠标移出框后更慢地进入初始状态吗？有谁知道这方面的解决方案？只要用户将鼠标悬停在div上，动画就需要无限重复。

Answer 1

检查这是否是你的目标。

当广告聚焦，悬停或活跃时，请注意已添加transition广场，这样它仍然会过渡（而不是快照）当它不再被徘徊时的原始状态。

注意：根据Temani Afif，这不起作用，因为它是如此简单（一行）我不知道该怎么做但是在尝试寻找之前等待第三种意见（希望是OP的）并修复故障。

让我知道它的票价

@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(2);
    transform: scale(2);        
  }
}
.hvr-pulse-grow {
  height:50px;
  width:50px;
  background:red;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  transition: 0.9s ease all
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

<!DOCTYPE html>
<html>
<head>
    <title>
        ALBERT 
    </title>
  <link rel="stylesheet" type="text/css" href="tes.css">
</head>
<body>
<div class="hvr-pulse-grow"></div>
</body>
</html>

Answer 2

您可以通过向元素的正常状态添加动画以及:hover动画的CSS键来减慢“mouseleave”事件的速度。

这可以解决您在纯jQuery中的问题，但使用javascript或jQuery处理此动画会更加简单和清晰。使用transition，您只需为CSS中的所有属性添加.hvr-pulse-grow { height: 50px; width: 50px; background: red; display: inline-block; vertical-align: middle; box-shadow: 0 0 1px transparent; -webkit-animation-name: hvr-pulse-grow-out; animation-name: hvr-pulse-grow-out; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; } .hvr-pulse-grow:hover { animation-iteration-count: infinite; transform: scale(1); -webkit-animation-name: hvr-pulse-grow-in; animation-name: hvr-pulse-grow-in; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; } @keyframes hvr-pulse-grow-in { from { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.1);} } @keyframes hvr-pulse-grow-out { from { -webkit-transform: scale(1.1); } to { -webkit-transform: scale(1);} }，然后使用hover() method处理mouseenter和mouseleave事件的动画。

希望这有帮助！

<!DOCTYPE html>
<html>

<head>
  <title>
    ALBERT
  </title>
  <link rel="stylesheet" type="text/css" href="tes.css">
</head>

<body>
  <div class="hvr-pulse-grow"></div>
</body>

</html>

{{1}}

使用CSS变换比例将鼠标悬停在div上后添加动画

2 个答案: