CSS3悬停不透明度缓入效果？

Posted 2023-03-06

【中文标题】CSS3悬停不透明度缓入效果？

【英文标题】：CSS3 hover opacity ease-in-out effect?

【发布时间】：2017-04-26 08:06:11

【问题描述】：

下面有没有更好更简单的写 opacity ease-in-out 效果的方法？

CSS：

 .button-hover 
    font-family: arial black;
    font-size: 100px;
    color: #000;

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;


.button-hover:hover 
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 0.5;

如您所见，我将这些行重复了两次，这似乎并不理想：

    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;

html：

<div class="container">
    <a href="#" class="button-hover">HOVER ME</a>
</div>

jsfiddle

【参考方案1】：

SASS 和 LESS 可以让您轻松搞定。为此，您可以使用 SASS 和 LESS Mixins。

示例（SASS）：

/* Create a Mixin (SASS) */
@mixin transition($property, $time, $method) 
  -webkit-transition: $property $time $method;
  -moz-transition: $property $time $method;
  -ms-transition: $property $time $method;
  -o-transition: $property $time $method;
  transition: $property $time $method;


/* Include this Mixin (SASS) */
.button-hover:hover 
  @include transition(opacity, 1s, ease-in-out);

示例（少）：

/* Create a Mixin (LESS) */
.transition(@property, @time, @method) 
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;


/* Include this Mixin (LESS) */
.button-hover:hover 
  .transition(opacity, 1s, ease-in-out);

这将转换为 CSS：

.button-hover:hover 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;

更多关于SASS、LESS

【讨论】：

但我使用 LESS。

@teelou 我也集成了less mixin，请看一下。这要容易得多。

【参考方案2】：

不要重复转换规则。 CSS pre-processors 可以帮助使用供应商前缀，但您确实不需要（也不应该）重复 :hover 中的转换声明.只需将它们一次设置为元素的默认状态，如下所示：

.button-hover 
    font-family: arial black;
    font-size: 100px;
    color: #000;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    opacity: 1;


.button-hover:hover 
    opacity: 0.5;

<div class="container">
    <a href="#" class="button-hover">HOVER ME</a>
</div>

Understanding CSS3 Transitions

【讨论】：

好答案！仅当它们不同时才应声明它们。

【参考方案3】：

这些是浏览器支持所需的前缀。 您可以查看here 哪些浏览器版本需要前缀，并根据您要支持的浏览器决定是否可以删除它们。

例如，-moz- 前缀用于 Firefox，您可以看到从 Firefox 16 开始不再需要它，因此您可以在 Firefox 16+ 中使用不带 -moz- 的 transition。

阅读有关前缀 here 的更多信息。