Airbnb.com logo like animation

Question

How does airbnb.com achieves the animation when you mouse over the logo ? I think it uses css3 but I wasn't fully able to understand it.

Answer 1

You are correct, it uses CSS3 animation:

@-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

There is a problem with the code of the website.

Per http://www.w3.org/TR/css3-transforms/#transform-functions, rotate3d(<number>, <number>, <number>, <angle>) specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will cause the rotation to not be applied.

For WebKit based browser the site was doing -webkit-transform: rotate3d(0,0,0,0deg) in the keyframes which is an invalid value and therefore should be rejected. You want to do -webkit-transform: rotate3d(1,1,1,0deg) instead.

So every browser aligns to that behaviour so I'd say that it's a content issue.

Tracked by https://bugs.webkit.org/show_bug.cgi?id=112274 inside WebKit but it's very likely that we'll close the bug without doing anything.