CSS如何使元素淡入然后淡出？

  • Z时代
  • 2024-01-10
  • 分类：问答

通过使用以下CSS将其类更改为.elementToFadeInAndOut，可以使不透明度为零的元素淡入：

.elementToFadeInAndOut {
    opacity: 1;
    transition: opacity 2s linear;
}

有没有一种方法可以通过编辑同一类的CSS使元素淡入淡出？

回答：

使用CSS @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}
@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

这是一个演示

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}
@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>

阅读：使用CSS动画

您可以通过执行以下操作清除代码：

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
    opacity: 0;
}
@-webkit-keyframes fadeinout {
  50% { opacity: 1; }
}
@keyframes fadeinout {
  50% { opacity: 1; }
}
<div class=elementToFadeInAndOut></div>

以上是 CSS如何使元素淡入然后淡出？ 的全部内容， 来源链接： utcz.com/qa/433541.html

回到顶部