我以前使用过 CSS 过渡,但我有一个独特的案例。我正在编写一个用于创建模式的自定义插件。本质上我是即时创建一个 divdocument.createElement('div')
并将其附加到带有几个类的主体中。这些类定义颜色和不透明度。我想严格使用 CSS 以便能够在这个 div 中淡入淡出,但是使状态更改似乎很困难,因为它们需要一些用户交互。
尝试了一些高级选择器希望它能改变状态,尝试了媒体查询希望改变状态......寻找任何想法和建议,如果可能的话我真的想将其保留在CSS中
如今 CSS 关键帧支持非常好:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 2s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h1 class="fade-in">Fade Me Down Scotty</h1>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)