Airbnb.com的标志动画效果

Question

airbnb.com网站是如何在鼠标悬停在其标志上时实现动画效果的？我认为它使用了CSS3，但我并没有完全理解它。

- Hellnar

Answer 1

您说得对，它使用了CSS3动画：

@-webkit-keyframes wiggle {
  0% {
    -webkit-transform: rotate3d(0,0,0,0deg)
  }

  25% {
    -webkit-transform: rotate3d(0,0,0,5deg)
  }

  75% {
    -webkit-transform: rotate3d(0,0,0,-5deg)
  }

  100% {
    -webkit-transform: rotate3d(0,0,0,0deg)
  }
}

@-moz-keyframes wiggle {
  0% {
    -moz-transform: rotate(0deg)
  }

  25% {
    -moz-transform: rotate(5deg)
  }

  75% {
    -moz-transform: rotate(-5deg)
  }

  100% {
    -moz-transform: rotate(0deg)
  }
}

#logo:hover {
  -webkit-animation: wiggle .2s ease-in-out alternate;
  -moz-animation: wiggle .2s ease-in-out alternate;
  -ms-animation: wiggle .2s ease-in-out alternate
}

#logo:hover img {
  opacity: .8;
  -ms-filter: "alpha(opacity=80)";
  filter: alpha(opacity=80)
}

- Alexander Pavlov

---

它在Firefox和Safari上运行得非常好，但奇怪的是在Chrome上却不行。你知道可能是为什么吗？ - PericlesTheo

@PericlesThedorou 这在Chrome 24中有效，但在Chrome 25中停止工作。有人知道为什么吗？如何使其在Chrome中再次工作？https://productforums.google.com/forum/?fromgroups=#!topic/chrome/aoavVOPxTmE - Ryan

@Ryan：奇怪的是，最新版的Firefox Nightly上http://airbnb.com对我也不起作用。 - Alexander Pavlov

@AlexanderPavlov 是的，我认为Airbnb在Chrome 25发布后不久就更改了他们的源代码。我不认为他们在任何浏览器上都会再做出“wiggle”的动作（尽管我没有仔细查看）。 - Ryan

@Ryan：根据 https://bugs.webkit.org/show_bug.cgi?id=112274 上的评论，airbnb.com 上的 CSS 存在缺陷。 - Alexander Pavlov

Answer 2

网站代码存在问题。

根据http://www.w3.org/TR/css3-transforms/#transform-functions，rotate3d(<number>, <number>, <number>, <angle>)表示围绕由前三个参数描述的[x,y,z]方向矢量旋转最后一个参数指定的角度的三维旋转。无法归一化的方向矢量（例如[0,0,0]）将导致不应用旋转。

对于基于WebKit的浏览器，该站点在关键帧中执行了-webkit-transform: rotate3d(0,0,0,0deg)，这是一个无效值，因此应该被拒绝。您应该选择使用-webkit-transform: rotate3d(1,1,1,0deg)。

因此，每个浏览器都会遵循该行为，因此我认为这是内容问题。

在WebKit内跟踪https://bugs.webkit.org/show_bug.cgi?id=112274，但很可能我们将关闭该错误而不采取任何措施。

- Alexis Menard

Answer 3

我的解决方案与Pavlov提交的类似。截至此时，它适用于Chrome 25和26以及早期版本-我在近一年前开发了这个解决方案，并且它在所有版本中都有效。

.logo:hover {
-webkit-animation: wiggle .15s 2 ease;
-moz-animation: wiggle .15s 2 ease;
-o-animation: wiggle .15s 2 ease;
}

@-webkit-keyframes wiggle {
from { -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(5deg) scale(1) skew(1deg) translate(0px); }
from { -webkit-transform: rotate(5deg) scale(1) skew(1deg) translate(0px); }
to { -webkit-transform: rotate(-5deg) scale(1) skew(1deg) translate(0px); }
}

@-moz-keyframes wiggle {
from { -moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(5deg) scale(1) skew(1deg) translate(0px); }
from { -moz-transform: rotate(5deg) scale(1) skew(1deg) translate(0px); }
to { -moz-transform: rotate(-5deg) scale(1) skew(1deg) translate(0px); }
}

@-o-keyframes wiggle {
from { -o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(5deg) scale(1) skew(1deg) translate(0px); }
from { -o-transform: rotate(5deg) scale(1) skew(1deg) translate(0px); }
to { -o-transform: rotate(-5deg) scale(1) skew(1deg) translate(0px); }
}

- Alfonso Martinez Lagares