css 淡入淡出效果不会在持续时间后持续

Question

根据这个答案我有淡入淡出的效果

使用 @keyframes 为什么不透明度 returns 变回 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>

Answer 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)
}

Answer 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>

Answer 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>

css 淡入淡出效果不会在持续时间后持续

css fade in effect does not last after duration

html

css

css-animations