Animation 动画CSS3：显示+；不透明度

我有一个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;
}

仅当我删除了对

显示的更改时，此代码才起作用

我想在鼠标悬停后更改显示，但不透明度应该使用转换来更改。
显示：
不可转换。您可能需要使用jQuery来完成您想做的事情。
您可以使用CSS动画：

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

我做的一件事是将初始状态的边距设置为类似于“左边距：-9999px”，这样它就不会出现在屏幕上，然后在悬停状态下重置“左边距：0”。在这种情况下，将其保留为“display:block”。为我做了这个把戏：）

编辑：保存状态而不恢复到以前的悬停状态？好的，这里我们需要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>


.悬停{
/*悬停样式在这里*/
}
$（'.link'）.hover（函数（）{
var$link=$（此）；
if（！$link.hasclass（'hovered'））{//检查是否已给定该类
$（this.addClass（'hovered'）；
} 
});
我做了一些改动，但效果很好

.child{
宽度：0px；
高度：0px；
不透明度：0；
}
.父项：悬停子项{
宽度：150px；
高度：300px；
不透明度：.9；
}

谢谢大家。
基于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;
    }
}

此解决方案可用于：

定义“关键帧”：

@-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; }
}


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

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;
}


如果可能-使用
可见性
而不是
显示

例如：

.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;
}

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

通过使用
可见性
而不是
显示
，我可以绕过这个问题。这对我来说很有用，因为我的子元素是
位置：绝对的
，所以文档流不会受到影响。这可能也适用于其他人

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

.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;
}

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

.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及以下版本不支持此功能。
对于绝对元素或固定元素，您也可以使用z-index：

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

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

其他元素现在应该有一个介于-100和100之间的z-指数。
我知道，这不是你问题的真正解决方案，因为你要求

显示+不透明度

我的方法解决了一个更一般的问题，但这可能是应该通过使用
display
结合
opacity
来解决的背景问题

我的愿望是在元素不可见时将其移开。
此解决方案正是这样做的：它将元素移出，这可用于转换：

.child{
左：-2000px；
不透明度：0；
可见性：隐藏；
过渡：左0.8秒，可见性0.8秒，不透明度0.8秒；
}
.parent:悬停.child{
左：0；
不透明度：1；
能见度：可见；
过渡：左0，可见性0，不透明度0.8；
}

此代码不包含任何浏览器前缀或向后兼容漏洞。它只是说明了在不再需要元素时如何将其移开的概念

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

过渡：左0，可见性0，不透明度0.8s；

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

过渡：左0.8秒，可见性0.8秒，不透明度0.8秒；

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

虽然我没有回答这个问题，但我希望我能一针见血。
如果你用JS触发了更改，比如点击，有一个很好的解决方法

您可以看到，之所以会出现问题，是因为在
display:none
元素上忽略动画，但浏览器会一次应用所有更改，并且元素在不同时设置动画的情况下永远不会
display:block

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

.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;
}

下面是一个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);

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

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

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

为了在HoverIn/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;
  }
}

如何使用CSS设置不透明度动画：

这是我的代码：

CSS代码


.item{
高度：200px；
宽度：200px；
背景：红色；
不透明度：0；
过渡：不透明度1s缓进缓出；
}
.项目：悬停{
不透明度：1；
}
代码{
背景：线性梯度（向右，#fce4ed，#ffe8cc）；
}

将鼠标移到文本上方
如果CSS没有像其他人建议的那样工作，则使用非常简单的Javascript代码进行淡入。没有人提到
动画填充模式：向前因此，在这种情况下，
显示
在不透明度动画运行后恢复为
无
。这个CSS设置保留了动画的最后一个状态，所以它是
display:block
好主意，但是当我鼠标移出时，元素消失了……Alexis，这不是你想要做的吗？“悬停”表示仅当鼠标悬停时。请澄清你想要实现的目标。是的，对不起。我要保存鼠标外的淡入淡出。这会改变一切。几乎。基本上，您需要的是一个JS函数，它将检测悬停状态，正如其他用户所指出的，并添加。。。好。。。看我更新的答案。好主意，我成功了