css - 漂浮的幽灵CSS动画

Question

我为我的网站 Logo 创建了一个 SVG 幽灵。我制作了一个 CSS 动画，所以当用户将鼠标悬停在 Logo 上时，幽灵就会开始漂浮。

一切正常，除了当它被取消悬停时，幽灵会回到原来的位置。当它返回到 translateY(0) 时是否可以让它也具有动画效果？我自己尝试了一个解决方案，但它不起作用。

例子如下:

@keyframes float {
  100% {
    transform: translateY(-8px);
  }
}
@keyframes bob {
  0% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes sink {
  100% {
    transform: translateY(0);
  }
}
#logo svg {
  margin: 20px;
  overflow: visible;
}
#logo #ghost {
  animation-name: sink;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
#logo:hover #ghost {
  animation-name: float, bob;
  animation-duration: 0.3s, 0.7s;
  animation-timing-function: ease-out, ease-in-out;
  animation-delay: 0s, 0.3s;
  animation-direction: normal, alternate;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
}

<div id="logo">
  <svg width="100" height="100">
    <g id="ghost">
      <rect fill="red" width="100" height="100" />
    </g>
  </svg>
</div>

Answer 1

使用 JQuery 并不难。

这是一个可以使用 setInterval() 计时器定期调用的函数:

var haunt=function(){
  var dy;
  ghost_ticks++;
  ghost_clock++;
  if (ghost_clock>30) ghost_clock=30;
  dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60);   /* sine wave */
  dy *= -40 + 6*Math.cos(ghost_ticks/5);               /* ramp      */
  $("#ghost").css("transform","translate(0,"+dy+"px)");
  if (ghost_clock==0) {
    clearInterval(ghost_timer);
    ghost_timer=ghost_ticks=0;
  }
}

这会将幽灵的位置计算为两个分量的总和 - 一个正弦波悬停运动，以及一个在动画开始和结束时上下倾斜并控制悬停幅度的垂直偏移。

这是通过两个计数器变量完成的:ghost_ticks 在每次滴答时简单地递增并用于计算悬停位置，而 ghost_clock 通过计数到 30 来控制斜坡然后停下来。在动画结束时，它的值变为负数，因此它计数归零，此时动画停止。

您仍然可以使用 CSS 过渡来更改幽灵的颜色。

var ghost_ticks=0, ghost_clock=0, ghost_timer=0;
var haunt=function(){
  var dy;
  ghost_ticks++;
  ghost_clock++;
  if (ghost_clock>30) ghost_clock=30;
  dy = Math.sin(Math.abs(ghost_clock) * Math.PI/60);
  dy *= -40 + 6*Math.cos(ghost_ticks/5);
  $("#ghost").css("transform","translate(0,"+dy+"px)");
  if (ghost_clock==0) {
    clearInterval(ghost_timer);
    ghost_timer=ghost_ticks=0;
  }
}
var start_haunting=function(){
  if (ghost_clock < 0) ghost_clock = -ghost_clock;
  if (!ghost_clock) ghost_timer=setInterval(haunt,25);
};
var stop_haunting=function(){
  if (ghost_clock > 0) ghost_clock = -ghost_clock;
};
$(document).ready(function(){
  $("#logo").hover(start_haunting,stop_haunting);
});

#logo { background-color:#000; width: 200px; height: 200px; }
#logo #ghost { fill:#333; transition: fill 1s; }
#logo:hover #ghost { fill:#999; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logo">
  <svg width="200" height="200" viewBox="0 0 200 200">
    <g id="ghost" stroke="none">
      <path d="M60 160V100A40 40 0 0 1 140 100V160l-10-10l-10 10l
               -10-10l-10 10l-10-10l-10 10l-10-10ZM73 100a10 10 0
               0 0 20 0 10 10 0 0 0 -20 0M107 100a10 10 0 0 0 20
               0 10 10 0 0 0 -20 0z" />
      </g>
   </svg>
</div>