通过使用以下css将其类更改为.elementToFadeInAndOut,我可以创建一个不透明度为零的元素：
.elementToFadeInAndOut {
opacity: 1;
transition: opacity 2s linear;
}
有没有办法通过编辑同一个类的css,使元素淡入后淡出？
非常感谢您的宝贵时间.
解决方法
使用css
@L_502_0@
.elementToFadeInAndOut {
opacity: 1;
animation: fade 2s linear;
}
@keyframes fade {
0%,100% { opacity: 0 }
50% { opacity: 1 }
}
这是一个DEMO
.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>
您可以通过执行以下操作来清理代码：
.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>
