如何解决动画结束后,动画填充模式和不透明度不会保持最后的样式
我正在尝试将opacity
设置为animation-fill-mode
,在动画结束时将forwards
设置为1(应该是最后一个关键帧),但是对于某些情况,我错过它的原因是在动画结束时将不透明度设置为0。
以下是我正在设置动画的元素的片段:
<div class="section active">
<span>Il</span>
<span>massaggio</span>
<span>è</span>
<span>l'unica</span>
<span>forma</span>
<span>di</span>
<span>piacere</span>
<span>fisico</span>
<span>a</span>
<span>cui</span>
<span>la</span>
<span>natura</span>
<span>ha</span>
<span>dimenticato</span>
<div id="arrow-container">
<img src="images/social-35-white.svg" id="arrow-down" alt="" class="image-2">
</div>
</div>
这是带有动画的CSS:
span {
color: transparent;
animation: blur 10s ease-out;
-webkit-animation: blur 10s ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
span:nth-child(1) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
span:nth-child(2) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
span:nth-child(3) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
span:nth-child(4) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
span:nth-child(5) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
span:nth-child(6) {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
span:nth-child(7) {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
span:nth-child(8) {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
span:nth-child(9) {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
span:nth-child(10) {
animation-delay: 1.0s;
-webkit-animation-delay: 1.0s;
}
span:nth-child(11) {
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
span:nth-child(12) {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span:nth-child(13) {
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
}
span:nth-child(14) {
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}
@keyframes blur {
0% {text-shadow: 0 0 100px #111; opacity:0;}
5% {text-shadow: 0 0 90px #111;}
15% {opacity: 1;}
20% {text-shadow: 0 0 0px #111;}
80% {text-shadow: 0 0 0px #111;}
100%. {opacity: 1;}
}
@-webkit-keyframes blur {
0% {text-shadow: 0 0 100px #111; opacity:0;}
5% {text-shadow: 0 0 90px #111;}
15% {opacity: 1;}
20% {text-shadow: 0 0 0px #111;}
80% {text-shadow: 0 0 0px #111;}
100% {opacity: 1;}
}
为什么最后不保持不透明度?
解决方法
您的最后一个关键帧是100% {opacity: 1;}
,因此这是保留的样式...但是,不是使文字可见的样式!
文本具有color:transparent
,因此不透明度没有任何作用。实际上使文本可见的样式是text-shadow: 0 0 0px #111;
,因此您需要在最后一个关键帧中添加该样式:
100% {opacity: 1; text-shadow: 0 0 0px #111; }
注意:我保留了opacity
,以防您此处未包含其他元素,但是对于此处的代码,它实际上没有任何作用:)
工作示例:
您可以在下面看到此工作,仅供参考,我跑了2秒钟,因此可以更快地看到它的工作:)
span {
color: transparent;
animation: blur 2s ease-out;
-webkit-animation: blur 2s ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
span:nth-child(1) {
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
span:nth-child(2) {
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
span:nth-child(3) {
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
span:nth-child(4) {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
span:nth-child(5) {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
span:nth-child(6) {
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
span:nth-child(7) {
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
span:nth-child(8) {
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
span:nth-child(9) {
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
span:nth-child(10) {
animation-delay: 1.0s;
-webkit-animation-delay: 1.0s;
}
span:nth-child(11) {
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
span:nth-child(12) {
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span:nth-child(13) {
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
}
span:nth-child(14) {
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}
@keyframes blur {
0% {text-shadow: 0 0 100px #111; opacity:0;}
5% {text-shadow: 0 0 90px #111;}
15% {opacity: 1;}
20% {text-shadow: 0 0 0px #111;}
80% {text-shadow: 0 0 0px #111;}
100% {opacity: 1; text-shadow: 0 0 0px #111; }
}
@-webkit-keyframes blur {
0% {text-shadow: 0 0 100px #111; opacity:0;}
5% {text-shadow: 0 0 90px #111;}
15% {opacity: 1;}
20% {text-shadow: 0 0 0px #111;}
80% {text-shadow: 0 0 0px #111;}
100% {opacity: 1; text-shadow: 0 0 0px #111; }
}
<div class="section active">
<span>Il</span>
<span>massaggio</span>
<span>è</span>
<span>l'unica</span>
<span>forma</span>
<span>di</span>
<span>piacere</span>
<span>fisico</span>
<span>a</span>
<span>cui</span>
<span>la</span>
<span>natura</span>
<span>ha</span>
<span>dimenticato</span>
<div id="arrow-container">
<img src="images/social-35-white.svg" id="arrow-down" alt="" class="image-2">
</div>
</div>
此外,您还需要在该行中另外输入.
: 100%. {opacity: 1;}
正如您所说,使用animation-fill-mode: forwards;
意味着该元素将保留执行期间遇到的最后一个关键帧设置的计算值,这是对任何其他询问此问题的用户的参考:MDN Docs for animation-fill-mode。 / p>
这应该有效
span {
animation: blur 5s ease-out;
animation-fill-mode: forwards;
}
span:nth-child(1) {
opacity: 0;
animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
span:nth-child(2) {
opacity: 0;
animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
span:nth-child(3) {
opacity: 0;
animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
span:nth-child(4) {
opacity: 0;
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
span:nth-child(5) {
opacity: 0;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
span:nth-child(6) {
opacity: 0;
animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
}
span:nth-child(7) {
opacity: 0;
animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
}
span:nth-child(8) {
opacity: 0;
animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
}
span:nth-child(9) {
opacity: 0;
animation-delay: 0.9s;
-webkit-animation-delay: 0.9s;
}
span:nth-child(10) {
opacity: 0;
animation-delay: 1.0s;
-webkit-animation-delay: 1.0s;
}
span:nth-child(11) {
opacity: 0;
animation-delay: 1.1s;
-webkit-animation-delay: 1.1s;
}
span:nth-child(12) {
opacity: 0;
animation-delay: 1.2s;
-webkit-animation-delay: 1.2s;
}
span:nth-child(13) {
opacity: 0;
animation-delay: 1.3s;
-webkit-animation-delay: 1.3s;
}
span:nth-child(14) {
opacity: 0;
animation-delay: 1.4s;
-webkit-animation-delay: 1.4s;
}
@keyframes blur {
0% { color: transparent; text-shadow: 0 0 100px #111; }
50% { color: transparent; text-shadow: 0 0 90px }
100% { opacity: 1; color: transparent; text-shadow: 0 0 0px #111; }
}
<div class="section active">
<span>Il</span>
<span>massaggio</span>
<span>è</span>
<span>l'unica</span>
<span>forma</span>
<span>di</span>
<span>piacere</span>
<span>fisico</span>
<span>a</span>
<span>cui</span>
<span>la</span>
<span>natura</span>
<span>ha</span>
<span>dimenticato</span>
<div id="arrow-container">
<img src="images/social-35-white.svg" id="arrow-down" alt="" class="image-2">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。