html div淡出,css3 – CSS如何使元素淡入淡出然后淡出？

使用css

@L_403_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; }

}

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

.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; }

}