用CSS变换量表悬停在DIV上后，添加动画

@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;
}

<!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>

这效果很好，但是在将鼠标移出框后，我可以添加一个transition以更慢地转到初始状态吗？有人知道解决方案吗？动画需要无限地重复，直到用户徘徊在Div。

上

您可以通过将动画添加到元素的正常状态以及:hover动画中的from键中来减慢" Mouseleave"事件。

这可以在纯CSS中解决您的问题，但是使用jQuery或javascript处理此动画会更简单和清洁。使用jQuery，您只需为CSS中的所有属性添加transition，然后使用hover()方法处理动画MouseEnter和Mouseleave事件。

希望这会有所帮助！

.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);}
}

<!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>

检查是否是您的目标。

请注意，当它不是 focused ，悬停 nor active 时，将添加的 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>

相关内容

最新更新

热门标签：