Airbnb.com logo as animation

Question

How does airbnb.com achieve animation when hovering over a logo? I think it uses css3, but I could not fully understand it.

Answer 1

You are right, 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 website code.

Per http://www.w3.org/TR/css3-transforms/#transform-functions , rotate3d(<number>, <number>, <number>, <angle>) indicates a 3D rotation at the angle indicated in the last parameter relative to the direction vector [x,y,z] described by the first three parameters. A direction vector that cannot be normalized, for example [0,0,0] , will result in rotation not being applied.

For a WebKit-based browser, the site ran -webkit-transform: rotate3d(0,0,0,0deg) in keyframes, which are invalid values ​​and therefore must be rejected. Instead, you want to do -webkit-transform: rotate3d(1,1,1,0deg) .

Therefore, each browser is consistent with this behavior, so I would say that this is a content issue.

It is monitored by https://bugs.webkit.org/show_bug.cgi?id=112274 inside WebKit, but it is very likely that we will close the error without doing anything.

Answer 3

My solution for this is similar to the one presented by Pavlov. Starting with this publication, it works with Chrome 25 and 26 and earlier versions - I developed it almost a year ago, and it 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); } }