Airbnb.com логотип как анимация

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

Мое решение для этого похоже на предложенное Павловым.На момент публикации он работал с 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); }
}

Answer 3

Проблема с кодом сайта.

Per 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) вместо.

Так что каждый браузер настраивается на такое поведение, поэтому я бы сказал, что это проблема с контентом.

Отслеживается https://bugs.webkit.org/show_bug.cgi?id=112274 внутри WebKit, но очень вероятно, что мы закроем ошибку, ничего не делая.