小编tro*_*lic的帖子

编辑：这与本文不同，如何将鼠标悬停后如何在鼠标移出时反转动画。不同之处在于，在这种情况下，过渡状态（进展程度）至关重要，这与前面提到的完全忽略过渡的职位不同。

TL; DR：动画结束后，如何将元素动画化/转换回其原始状态？

你好，

我正在尝试制作动画面板，以使其在悬停时“浮动”。我的问题是鼠标离开面板，而不是过渡回其原始状态，而是立即跳回。

可以在下面的代码段中找到它的简化版本。

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
}

div:hover {
  animation: float 2s infinite ease;
}

@keyframes float {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: translateY(-20px);
  }
}

<html>
  <head>
    <title>animate to orignal position</title>
  </head>
  <body>
    <div id='box'></div>
  </body>
</html>

如您所见，浮动会触发类似于浮动动作的平滑动画，但是，由于鼠标离开该框而动画突然停止，动画突然中断。

所以我的问题是：有没有一种方法可以让盒子过渡到其原始状态，最好不要使用JavaScript（尽管所有建议都值得赞赏）。

（这可能已经在网上的某个地方得到了回答，如果是这种情况，那么我真的很抱歉，但是我一直无法找到解决问题的合适方法。如果找到合适的解决方案，请添加副本。）

谢谢。

这个问题我已经有一段时间了。我正在尝试添加一个通过 Steam 登录的按钮，该按钮在登录时不仅会检索用户 ID，还会验证签名。Steam 使用 OpenID 2.0。

我已按照此处的文档进行操作。我仔细地遵循了这些步骤，花了我一天中的大部分时间来试图解决这个问题。我的代码是这样的：

let s = data['openid.signed'].split(',');
let x = Buffer.from(s.map(x => `${x}:${data['openid.' + x]}`).join('\n') + '\n', 'utf8');
let c = crypto.createHash('sha1').update(x).digest('base64');
console.log(x.toString('utf8')); // This is the key:value string
console.log(c); // This is the final result; the generated signature

其中 data 是 OpenID 提供者给出的响应。日志记录x（键：值对字符串）给出了预期的输出：

signed:signed,op_endpoint,claimed_id,identity,return_to,response_nonce,assoc_handle
op_endpoint:https://steamcommunity.com/openid/login
claimed_id:https://steamcommunity.com/openid/id/765611981[1234567]
identity:https://steamcommunity.com/openid/id/765611981[1234567]
return_to:http://127.0.0.1:8000/resolve
response_nonce:2018-12-01T17:53: [some_hash]=
assoc_handle:1234567890

但是，我生成的哈希c与给定的签名不匹配openid.sig。请注意，我\n在上述 key:value 对字符串的末尾使用了 a ，因为这是我解释文档的方式。

笔记。我需要身份验证的原因是我想将 Steam 帐户连接到我网站上的一个帐户，并且通过 Steam 登录可以让您完全访问我网站上的帐户，这意味着用户不能简单地输入另一个用户 ID 并访问他们的帐户（重放攻击）。因此，我需要以某种方式验证签名。 …