我可以通过使用以下 css 将其类更改为 .elementToFadeInAndOut 来制作不透明度为零的淡入元素：
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
有没有办法通过编辑同一个类的 css 来使元素淡入后淡出？
Use css @关键帧 https://developer.mozilla.org/en/docs/Web/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 动画 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
您可以通过执行以下操作来清理代码：
.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
