通过使用以下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@
.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>