动画CSS3：显示+不透明度

100

我对CSS3动画有疑问。

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

仅当我删除的更改时，此代码才有效display。

我想在悬停后立即更改显示，但是不透明度应使用过渡进行更改。

animation  css 
— 亚历克西斯·德尔里（Alexis Delrieu）
source
2
如果CSS不能像其他人建议的那样工作，那么这里有一个非常简单的淡入淡出Javascript代码。
— Abhranil Das 2011年

Answers:

116

根据Michaels的回答，这是要使用的实际CSS代码

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
— 克里斯
source
1
支持所有浏览器。
— david_adler 2013年
所有浏览器均不支持CSS3。如果要扩展，只需添加正确的前缀
— 克里斯，克里斯
17
当鼠标悬停时，如何实现fadeOutToNone呢？
— 2015年
4
正如你可以使用的百分比分数，这是更好的做法是使用像0.001％，而1％，因为它最大限度地减少延迟，以“启动”，可以用更长的动画持续时间变得明显
— 扎克索西耶
1
-o-keyframes指令实际上是无用的，因为支持动画的第一个Opera版本已经基于webkit。
— Rico Ocepek '18
43

您可以使用CSS动画：

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
— 迈克尔·穆兰尼
source
好主意，我成功地在悬停时使用animation-fill-mode来显示我的元素，但是当我将鼠标移出时，元素消失了。
— 亚历克西斯·德尔里
2
您可以使用填充模式：在动画结束后，前进以保留更改。
— Michael Mullany 2012年
41

如果可能-使用visibility代替display

例如：

.child {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.parent:hover .child {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s;
}
— 托马斯·萨丁斯基
source
23
可见性属性的问题在于，这不会隐藏元素，只会使其不可见。因此它仍然会占用空间。
— 塞缪尔
6
不仅对事件（单击等）不可见，而且对事件也是透明的。不更改显示意味着不重排文档，这是一件好事。无论如何，应该通过不透明度淡入/淡出的大多数元素可能应该具有固定或绝对位置。
— Rasmus Kaj
12

此解决方法有效：

  1. 定义一个“关键帧”：

    @-webkit-keyframes fadeIn { 
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  20% { opacity: 0; }
  40% { opacity: 0.3; }
  60% { opacity: 0.5; }
  80% { opacity: 0.9; }
  100% { opacity: 1; }
}

  2. 在“悬停”上使用此“关键帧”：

    div a span { 
  display: none;
}

div a:hover span {
  display: block;

  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-name: fadeIn;
  animation-duration: 1s;
}
— 赫尔曼·施瓦茨
source
9

我用它来实现它。它们在悬停时会褪色，但隐藏时不会占据任何空间，完美！

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover child {
    height: auto;
    opacity: 1;
    visibility: visible;
}
— 费利克斯希尔施费尔德
source
6

我改变了一点，但结果很漂亮。

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

.parent:hover child {
    width: 150px;
    height: 300px;
    opacity: .9;
}

谢谢大家

— 亚历克西斯·德尔里（Alexis Delrieu）
source
4
这对于屏幕阅读器来说效果不佳：他们会继续阅读内容。
— ehdv
1
您可以将visibility: hidden;.child / 添加到visibility:visible;悬停中，这应该可以解决屏幕阅读器问题
— csilk 2015年
6

还有另一个很好的方法可以通过使用指针事件来完成此任务：

.child {
    opacity: 0;
    pointer-events: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

不幸的是，IE10及以下版本不支持此功能。

— 拉斐尔·克尔
source
4

我有同样的问题。我尝试使用动画而不是过渡效果（如@MichaelMullany和@Chris所建议的那样），但即使我复制粘贴了“ -moz”和“ -o”前缀，它也仅适用于webkit浏览器。

通过使用visibility代替，我可以解决此问题display。这对我有用，因为我的子元素是position: absolute，因此文档流不受影响。它也可能对其他人有用。

这就是使用我的解决方案时原始代码的样子：

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}
— 戴夫
source
如果要在动画看不见的时候将鼠标悬停在孩子身上，则它将回弹，因为该元素只是被隐藏了。如果您要在该位置移动鼠标，那会很烦人。
— adamj
4

如果您是用JS触发更改的，那么可以单击一下，这是一个不错的解决方法。

您会看到问题的发生，因为在display：none元素上忽略了动画，但是浏览器一次应用了所有更改，并且该元素从不显示：block，而没有同时进行动画处理。

诀窍是要求浏览器在更改可见性之后但触发动画之前渲染框架。

这是一个JQuery示例：

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);
— 丹尼尔·塞德莱切克
source
2
这个问题不标记用JavaScript也不jQuery的
— j08691
我知道，我写它来解释这种情况发生的原因。当我了解到这一点时，这对我非常有用，我希望它也会对其他人有所帮助。
— daniel.sedlacek
1
顺便说一句，不透明度值介于0和1之间
— Amr
2

在绝对或固定元素上，您也可以使用z-index：

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

现在其他元素的z索引应该在-100到100之间。

— 卢卡·斯蒂布（Luca Steeb）
source
不幸的是，这使type=password字段上的KeePass密码指示器符号拧紧。它不可见。
— 2015年
1
我们可以停止使用任意的z-index数字吗？此处：z-index：1；vs z-index：-1就可以了。选择巨大的Z索引数字会使事情变得难以处理。
— dudewad 2015年
2

我知道，这并不是您问题的解决方案，因为您要求

显示+不透明度

我的方法解决了一个更笼统的问题，但是也许这是应该display与结合使用解决的背景问题opacity。

我的愿望是在看不见元素时将其移开。该解决方案的确做到了这一点：将元素移开，可以用于过渡：

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

此代码不包含任何浏览器前缀或向后兼容性黑客。它仅说明了该概念，因为不再需要该元素时如何将其移开。

有趣的部分是两个不同的过渡定义。当鼠标指针悬停在.parent元素上时，.child需要立即将元素放在适当位置，然后将更改不透明度：

transition: left 0s, visibility 0s, opacity 0.8s;

如果没有悬停，或者将鼠标指针从元素上移开，则必须等到不透明度更改完成后才能将元素移出屏幕：

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

在设置display:none不会破坏布局的情况下，将对象移开将是一种可行的选择。

我希望我能回答这个问题，尽管我没有回答。

— 汉尼斯·莫根斯特恩
source
自IE9以来，该Microsoft筛选器已被弃用。您是否有特定理由想在2016年将其添加到答案中？
— TylerH
@TylerH一个人愿意达到多少用户是一个品味问题。
— 汉尼斯·摩根斯特恩
考虑到它已过时，并且Microsoft不再支持IE <11，那么使用该属性充其量是可疑的。
— TylerH
@TylerH通常必须容纳不会或不能升级到较新浏览器的客户端。我有一家知名的银行作为客户，他仍然使用IE6，并拒绝出于“原因”升级。
— 马库斯·坎宁安
@MarcusCunningham该问题用css3标记，这完全阻止了IE6（以及IE7和IE8）的使用。在最早的浏览器OP可能已经为其编写代码的情况下，不赞成使用此答案中的MS过滤器。对于将来的读者来说，它甚至没有用，因为它甚至不被支持。有没有为它包括在对这个问题的答案的说法。但是，这是有争议的，因为汉尼斯已将其从他的答案中删除。
— TylerH '16
1

我所做的一件事是将初始状态的边距设置为“ margin-left：-9999px”，这样它就不会出现在屏幕上，然后在悬停状态下重置“ margin-left：0”。在这种情况下，请使其保持“显示：阻止”状态。为我做了把戏:)

编辑：保存状态并且不还原到以前的悬停状态？好的，这里我们需要JS：

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>
— 约书亚记
source
好主意，但随后我将鼠标
— 移出
亚历克西斯，这不是你想做的吗？“悬停”仅在用鼠标悬停时表示。请阐明您要完成的工作。
— 约书亚
是的对不起 我想将淡入淡出保存在mouseout中。
— 亚历克西斯·德尔里
那改变了一切。几乎。基本上，您想要的是一个JS函数，该函数将检测其他用户指示的悬停状态，并添加...好吧...请参阅我的最新答案。
— 约书亚
1

为了在onHoverIn / Out上同时制作两种动画，我做了此解决方案。希望对别人有帮助

@keyframes fadeOutFromBlock {
  0% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }

  90% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }
}

@keyframes fadeInFromNone {
  0% {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
  }

  1% {
    position: relative;
    opacity: 0;
    transform: translateX(0);
  }

  100% {
    position: relative;
    opacity: 1;
    transform: translateX(0);
  }
}

.drafts-content {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  animation: fadeInFromNone 1s ease-in;
  will-change: opacity, transform;

  &.hide-drafts {
    position: absolute;
    opacity: 0;
    transform: translateX(-999px);
    animation: fadeOutFromBlock 0.5s ease-out;
    will-change: opacity, transform;
  }
}
— 尼古拉斯
source
0

如何使用CSS动画显示透明度：
这是我的代码：
CSS代码

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}
<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>
展开摘要

或检查此演示文件

函数表决（）{
var表决= getElementById（“ yourOpinion”）
if（this.workWithYou）：
表决+ = 1};
大声笑

— zakizakibzr
source
1
由于display仅删除了该属性，所以无法回答问题。
— 敬酒
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.