CSS不透明过渡一次只消失一行

时间:2018-10-22 20:13:16

标签: html css

我正在尝试使用过渡效果来改变不透明度,并在三行中依次淡入淡出。我的网页上有一个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
}

1 个答案:

答案 0 :(得分: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>