CSS淡入效果在持续时间后不会持续答案

【问题标题】：css fade in effect does not last after durationCSS淡入效果在持续时间后不会持续
【发布时间】：2022-01-31 19:06:34
【问题描述】：

根据这个答案opacity effect我有淡入效果

使用@keyframes为什么不透明度会回到0/如何禁用它？

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
  }
  
  @keyframes demo-animation
  {
    5% {
      opacity: .05;
    }
    25% {
      opacity: .25;
    }
    50% {
      opacity: .50;
    }
    75% {
      opacity: 0.75;
    }
      100% {
      opacity: 1;
    }
  }


.text1 {
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
</head>
<body>

    <div class="item" style="opacity:0">
        <h1 class="text1">Test me faided</h1>
    <h1 class="text-white item">faided</h1>
    </div>
    
</body>
</html>

【问题讨论】：

标签： html css css-animations

【解决方案1】：

我相信您需要向 .item 添加一个 css 属性。

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
    animation-fill-mode: forwards; // <- this will result in persisting the last state of the animation (in your case opacity: 1)
}

【讨论】：

【解决方案2】：

因为您已将默认opacity 设置为0。这会使动画结束后文本消失。如果您想一遍又一遍地运行，您需要添加animation-iteration-count 属性。下面是解决问题的代码。

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
    animation-iteration-count: infinite;
  }
  
  @keyframes demo-animation
  {
    5% {
      opacity: .05;
    }
    25% {
      opacity: .25;
    }
    50% {
      opacity: .50;
    }
    75% {
      opacity: 0.75;
    }
      100% {
      opacity: 1;
    }
  }


.text1 {
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
</head>
<body>

    <div class="item" style="opacity:0">
        <h1 class="text1">Test me faided</h1>
    <h1 class="text-white item">faided</h1>
    </div>
    
</body>
</html>

【讨论】：

【解决方案3】：

这是因为您设置了不透明度为 0 的内联样式。让动画处理它。

.item {
    color: rgb(22, 5, 5);
    animation-name: demo-animation;
    animation-duration: 7s;
  }
  
  @keyframes demo-animation
  {
    0% {
      opacity: 0;
    }
    5% {
      opacity: .05;
    }
    25% {
      opacity: .25;
    }
    50% {
      opacity: .50;
    }
    75% {
      opacity: 0.75;
    }
      100% {
      opacity: 1;
    }
  }


.text1 {
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
</head>
<body>

    <div class="item">
        <h1 class="text1">Test me faided</h1>
    <h1 class="text-white item">faided</h1>
    </div>
    
</body>
</html>

【讨论】：