浮动幽灵 CSS 动画答案

【问题标题】：Floating ghost CSS animation浮动幽灵 CSS 动画
【发布时间】：2015-06-19 03:52:15
【问题描述】：

我为我的网站徽标创建了一个 SVG 幻影。我制作了一个 CSS 动画，所以当用户悬停徽标时，幽灵开始浮动。

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

【问题讨论】：

演示会很有用 - 请参阅 How to create a Minimal, Complete, and Verifiable example
据我所知...这在 css 动画中是不可能的。例如...如果您要制作一些动画，在悬停时通过彩虹色褪色...然后您拉开——它怎么知道如何恢复原始颜色？我相信这是一个更复杂的函数，我建议使用 javascript 以及像velocity.js 这样的库来提供帮助。
我在问题中添加了一个演示。
这是我的看法：codepen.io/sheriffderek/pen/rVGemK?editors=110
感谢您的帮助@sheriffderek。您的示例效果很好，但它并不完全是我想要实现的。我的幽灵并不总是无限漂浮，只有当它悬停时。它也是一个内联 SVG，所以我不能为元素使用诸如位置之类的属性。

标签： css svg css-animations

【解决方案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>

【讨论】：