css3 – CSS如何使元素淡入淡出然后淡出?

前端之家收集整理的这篇文章主要介绍了css3 – CSS如何使元素淡入淡出然后淡出?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
通过使用以下css将其类更改为.elementToFadeInAndOut,我可以创建一个不透明度为零的元素:
.elementToFadeInAndOut {
    opacity: 1;
    transition: opacity 2s linear;
}

有没有办法通过编辑同一个类的css,使元素淡入后淡出?@H_403_5@

非常感谢您的宝贵时间.@H_403_5@

解决方法

使用css @keyframes
.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}


@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

这是一个DEMO@H_403_5@

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

阅读:Using CSS animations@H_403_5@

您可以通过执行以下操作来清理代码:@H_403_5@

.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相关文章