鼠标悬停时图片Y轴旋转问题：-webkit-/-o-浏览器不生效求解

嘿，我一眼就揪出问题所在啦！你的CSS代码里犯了个关键的小错误——针对非-moz内核的浏览器，你错误地使用了animation（动画属性），但我们要实现的是状态过渡效果，应该用transition才对，这就是webkit和o内核浏览器没反应的核心原因。

你的代码里的具体错误点： #

• 对-o-和-webkit-前缀，你写了animation属性，但正确的过渡属性应该是transition
• 最后一行的animation: animation 2000ms linear ease 0s;完全多余且无效，既没有对应的关键帧动画定义，也不符合我们要实现的过渡需求

修正后的完整代码： #

.spin-logo {
  height: 450px;
  margin: 0 auto;
  /* 为所有内核添加正确的过渡属性 */
  -moz-transition: transform 2000ms ease 0s;
  -o-transition: transform 2000ms ease 0s;
  -webkit-transition: transform 2000ms ease 0s;
  transition: transform 2000ms ease 0s;
}

.spin-logo:hover {
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

补充说明： #

1. transition负责实现元素从初始状态到目标状态的平滑过渡，而animation是用来定义多关键帧的复杂动画，这里我们只需要hover时的状态变化过渡，用transition就足够了
2. 现在主流浏览器已经支持不带前缀的transition和transform，但保留前缀可以兼容一些旧版本浏览器
3. 你原来的animation属性里写的animation作为动画名称也是无效的，因为你根本没定义这个关键帧动画，这是额外的错误点

修改后，所有内核的浏览器都能正常实现鼠标悬停时图片沿Y轴旋转360度的平滑过渡效果啦！

内容的提问来源于stack exchange，提问作者S. Busse