Question

我对div有一个脉动的css3效果，我希望它具有与脉冲无缝融合的悬停效果，我在这里有一个接近完成的JFiddle：

它几乎就在那里，但是当你将鼠标悬停在它上面时会有什么生涩，有什么想法让动画更流畅？

非常感谢！

代码在这里：

.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

@-webkit-keyframes pulsate {
0%   { opacity: 1; }
50%  { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}

.orb {
-webkit-animation: pulsate 2s infinite;
}

.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}

@-webkit-keyframes pulsatehover {
0%   { opacity: 1; }
50%  { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}

Answer 1

据我所知，CSS中没有办法链接或合并2个动画。

然而，您可以获得想要改变其工作方式的效果

＆＃13;

.container {
  width: 80px;
  height: 80px;
  margin: 100px;
  border: solid red 1px;
  position: relative;
  perspective: 800px;
  transition: perspective 2s;
}

.container:hover {
  perspective: 400px;
}
.obj {
   position: absolute;
  width: 100%;
  height: 100%;
  background: lightblue;
  border-radius: 50%;
  -webkit-animation: pulse 1s infinite alternate;
  animation: pulse 1s infinite alternate;
}

@-webkit-keyframes pulse {
   0% {transform: translateZ(0px)}  
  100% {transform: translateZ(200px)}  
}
@keyframes pulse {
   0% {transform: translateZ(0px)}  
  100% {transform: translateZ(200px)}  
}

＆＃13;

<div class="container">
<div class="obj">
</div>
</div>

＆＃13;

诀窍是让动画改变元素的z位置。然后，使用透视属性（在父级中）实现缩放效果。较低的视角会使变换的效果更大。请注意，动画始终是相同的，它是改变的视觉效果。

此外，透视图是可动画的，因此您可以使过渡平滑

CSS3循环动画与悬停动画无缝融合？

1 个答案: