如何同时动画 CSS 显示和不透明度变化？

转换 CSS 显示和不透明度属性

尝试使用显示和不透明度属性对 CSS 元素进行动画处理时，可能会很困难。标准 CSS 过渡属性仅允许数值动画，使其与显示更改不兼容。

但是，解决方案在于利用 CSS 关键帧动画。通过创建自定义关键帧动画，我们可以同时编排显示和不透明度属性的过渡。

提供的 CSS 代码引入了一个名为“fadeInFromNone”的关键帧动画。首先将显示设置为无，不透明度设置为 0，从而有效地隐藏元素。在动画的 1% 处，显示设置为块，使元素可见，同时不透明度保持为 0。这将创建元素从透明度淡入的外观。动画在 100% 时结束，元素完全可见且不透明。

要使用此动画，请将其应用于父元素的悬停状态。以下是更新后的代码：

<code class="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;
}</code>

此解决方案使您能够无缝过渡显示和不透明度属性，从而实现所需的动画效果。

以上是如何同时动画 CSS 显示和不透明度变化？的详细内容。更多信息请关注PHP中文网其他相关文章！