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