css - 如何修复悬停时背景图像的 CSS 过渡？

Question

我在一个学校元素中工作，制作一个电子商务网站，我想在导航栏 block (ul内的lis)上进行CSS转换，就像当我将鼠标悬停在一个 block 上时，该 block 的背景图像显示向上，但似乎转换不起作用，只发生正常的即时悬停。

这是我的代码，仅显示导航栏的一个 block ，即目录:

#catalogue {
  -o-transition-property: all;
  -o-transition-duration: 2s;
  -o-transition-timing-function: ease-in-out;
  -o-transition-delay: 2s;
  background-size: cover;
  background-repeat: no-repeat;
}

#catalogue:hover {
  display: inline-block;
  margin-left: 70px;
  position: relative;
  background-image: url(f1.png);
  background-size: 125px 70px;
  color: #000;
  font-weight: 600;
}

<nav>
  <ul>
    <li id="home"><a>Home</a></li>
    <li id="catalogue"><a>Catalogue</a></li>
    <li id="news"><a>News&Trends </a></li>
    <li id="contact"><a>Contact us</a></li>
  </ul>

Answer 1

您不需要在转换属性上使用 opera (-o-) 前缀。 CSS 转换不再需要前缀:http://shouldiprefix.com/#transitions

对于背景效果，您应该使用 CSS 动画，而不是过渡 - 因为截至目前，还无法将过渡应用于背景属性。

li {
  transition: all 2s ease-in-out 2s;
  background-size: cover;
  background-repeat: no-repeat;
}

li:hover {
  margin-left: 70px;
  position: relative;
  background-size: 125px 70px;
  color: #000;
  font-weight: 600;
  animation: backgroundIMG 2s ease-in-out 2s;
  animation-fill-mode: forwards;
}

@keyframes backgroundIMG {
  100% { background-image: url(http://www.rayesdesign.com/glitters/blue/blue016.gif); }
}

在这里查看它的运行情况:https://jsfiddle.net/Lkawnpg6/1/

诗。我已经更改了图像进行测试。