Airbnb.com logo like animation - 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.

Answer 3

My solution for this is similar to the one submitted by Pavlov. As of this posting, it works Chrome 25 and 26, and earlier versions - I developed this close to a year ago, and it has worked in all versions.
.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); }
}