在悬停元素或主元素上，我应该在哪里应用CSS3转换

Question

我正试图使用CSS3转换使:hover类在subtley中淡出，而不是直接淡出。

我已经尝试将transition应用于元素的CSS和:hovercss类，但都不起作用。我哪里错了？我应该如何正确应用transition？

JS fiddle

#menu-main-menu a {font-size:30px;transition: zoom 5s ease;transition: color 5s ease;}
#menu-main-menu a:hover {color:#ed918b;zoom:85%;}

Answer 1

实际上，第二个transition正在覆盖第一个。您应该将它们组合如下：

transition: property1 5s ease, property2 5s ease;

但是，zoom不是可设置动画的属性。它是由IE设计的，对浏览器的支持有限。如果要更改元素的比例，可以使用transform: scale()表示法。

因此，声明将是：

#menu-main-menu a {
    transition: transform 5s ease, color 5s ease;
}

由于简洁而省略了供应商前缀-此处示例。

为了回答最初的问题，在大多数情况下，最好在主选择器上应用transition，而不是:hover状态。

Answer 2

。。。正如上面所建议的，然而，将其放置在元素中的正确位置，而不是：悬停状态。

将其置于悬停状态会在悬停在元素上时触发平滑过渡，但悬停出来会很突然，因为过渡不存在。

Answer 3

我创建了一个快速示例来向您解释这一点：

div.nav1 > a{
  display:inline-block;
  padding-left:0px;
  color:blue;
  transition: all 0.2s;
  
  }
div.nav1 > a:hover{
  display:inline-block;
  padding-left:10px;
  color:red;
  
  
  }
div.nav2 > a{
  display:inline-block;
  padding-left:0px;
  color:blue;
  
  }
div.nav2 > a:hover{
  display:inline-block;
  padding-left:10px;
  color:red;
  transition: all 0.2s;  
  
  }
div.nav3 > a{
  display:inline-block;
  padding-left:0px;
  color:blue;
  transition: all 2s;  
  
  }
div.nav3 > a:hover{
  display:inline-block;
  padding-left:10px;
  color:red;
  transition: all 0.2s;  
  
  }

<div class="nav1">
<a href="a_link.html">Home</a><br />
<a href="a_link.html">About</a><br />
<a href="a_link.html">Products</a><br />
<a href="a_link.html">Contact</a><br />
</div><br />
<div class="nav2">
<a href="a_link.html">Home</a><br />
<a href="a_link.html">About</a><br />
<a href="a_link.html">Products</a><br />
<a href="a_link.html">Contact</a><br />
</div><br />
<div class="nav3">
<a href="a_link.html">Home</a><br />
<a href="a_link.html">About</a><br />
<a href="a_link.html">Products</a><br />
<a href="a_link.html">Contact</a><br />
</div>

希望这能有所帮助！