CSS 不透明度过渡淡入一行

Posted 2023-03-07

【中文标题】CSS 不透明度过渡淡入一行

【英文标题】：CSS opacity transition fade in one line at a time

【发布时间】：2019-03-26 23:40:33

【问题描述】：

我正在尝试使用过渡来更改不透明度并在三行中逐行淡入。我的页面上有一个带有 3 p 和强标签的 div，我试图在大约 2 秒后淡入每一行，中间有 0.5 秒。这是我正在尝试的 div 和 css 的小提琴。我已经搜索了这个主题并尝试了一些 css 和 js 的变体，但无论我做什么，这些线条一开始都是完全可见的，但是如果我通过检查器切换不透明度，它就会进出转换（也没有延迟因为某些原因）。任何帮助将不胜感激，谢谢！

http://jsfiddle.net/7uR8z/5047/

<div class=".Index-gallery-item-content-body">  
    <p>
        <strong>Test Line 1</strong>
    </p>

    <p>
        <strong>Line 2 Here</strong>
    </p>

    <p>
        <strong>Awesome Line 3</strong>
    </p>

</div>

CSS：

.Index-gallery-item-content-body p

    opacity:0


.Index-gallery-item-content-body p:nth-child(1)
 
    opacity:1;
    transition-delay: 2.5s;
    -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;


.Index-gallery-item-content-body p:nth-child(2)

    opacity:1;
    transition-delay: 3s;
    -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-ou


.Index-gallery-item-content-body p:nth-child(3)

    opacity:1;
    transition-delay: 3.5s;
    -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-ou

【问题讨论】：

你想让它在:hover时工作吗？

看起来你的小提琴缺少一些东西。

另外，transition 是 widely supported。至少为了您的 SO 问题，简化以删除供应商变体。

杰克，我希望在页面加载时这三行一次显示一个

另外，小提琴是错的，我现在正在纠正

【参考方案1】：

您正在寻找动画而不是过渡：

.Index-gallery-item-content-body p 
  opacity: 0


.Index-gallery-item-content-body p:nth-child(1) 
  animation: change 2s ease-in-out forwards;


.Index-gallery-item-content-body p:nth-child(2) 
  animation: change 2s ease-in-out forwards;
  animation-delay: 2.5s;


.Index-gallery-item-content-body p:nth-child(3) 
  animation: change 2s ease-in-out forwards;
  animation-delay: 5s;


@keyframes change 
  to 
    opacity: 1
  

<div class="Index-gallery-item-content-body">
  <p>
    <strong>Test Line 1</strong>
  </p>
  <p>
    <strong>Line 2 Here</strong>
  </p>
  <p>
    <strong>Awesome Line 3</strong>
  </p>
</div>