Question

当鼠标悬停在徽标上时，airbnb.com如何实现动画效果？我认为它使用css3，但我完全无法理解它。

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)
}

Answer 2

网站代码存在问题。

每http://www.w3.org/TR/css3-transforms/#transform-functions，rotate3d(<number>, <number>, <number>, <angle>)指定前一个参数中指定的关于前三个参数描述的[x,y,z]方向向量的角度的3D旋转。无法规范化的方向向量（例如[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跟踪，但我们很可能会在没有做任何事情的情况下关闭错误。

Answer 3

我的解决方案类似于巴甫洛夫提交的解决方案。截至本帖子，它适用于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); }
}

Airbnb.com徽标就像动画一样

3 个答案: