代码之家 › 专栏 › 技术社区 › Albert qerimi

将鼠标悬停在具有CSS变换比例的div上后添加动画

css-animations css-transitions css html

Albert qerimi · 技术社区 · 8 年前

@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上,动画就需要无限重复。

2 回复 | 直到 8 年前

Rich 8 年前

通过将动画添加到元素的正常状态以及 from 关键点 :hover 动画

这就解决了你的问题 CSS ,但使用 jQuery 或 javascript 。具有 jQuery ,您只需添加 transition 对于中的所有属性 CSS ,然后使用处理mouseenter和mouseleave事件的动画 hover() method 。

希望这有帮助!

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

Scaramouche 8 年前

检查这是否是你的目标。

注意添加的 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>