漂浮的幽灵CSS动画

Question

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

一切正常，除了当它被取消悬停时，幽灵会回到原来的位置。当它 returns 到 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>

漂浮的幽灵CSS动画

Floating ghost CSS animation

css

svg

css-animations