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>