大家好,我是半夏?,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 ? 加我微信:frontendpicker,邀你进群,一起学习交流前端,成为更优秀的工程师~关注公众号:半夏话前端,了解更多前端知识!点我探索新世界!
前言
在上一篇文章 《纯CSS 快闪文字效》 中,主要使用延迟动画,实现文字的逐渐消失的效果,不过我在实现上面的效果之后,发现了一个问题,如果我想重复的快闪,此时是不支持的。此时前面的文字可能都到N个循环了,但是后面的文字还是N-*个循环。
怎么解决呢?既然正着的延迟执行实现不了,那么负值可以嘛?
在CSS中animation-delay可以设置为负值,大家熟知的是正值是延迟执行,这里负值的是立即执行。而且根据动画执行时间和动画延迟负值。动画会立即执行其中的某一帧。
负值延迟
animation-delay: -4s;
负值延迟倒是会出现什么效果?我能明确的就是动画立即执行。不过他到底选择的是哪一帧?
我们通过一个小例子来明确!
这里我们设置文本颜色随着时间改变,这里将整个动画持续时间设置为10秒,动画分为5段。每一段是一个颜色。
这里我们可以设置animation-delay的值为-10到-1 ,然后看一下不同值下的开始颜色。
p{
animation: colorChange 10s infinite ease-in-out;
}
@keyframes colorChange{
0%{
color: rgb(43, 255, 0);
}
20%{
color: orange;
}
40%{
color: rgb(195, 0, 255);
}
60%{
color: rgb(255, 0, 0);
}
80%{
color:rgb(0, 255, 221);
}
100%{
color: black;
}
}
首先是-10
这里我们动画持续时间是10秒,动画是20%的等差。我们又可以将动画分成10%的等差。
下面我们来看一下动画演示。
当我们点击动画前面的checkbox的时候,字体的颜色变成color: rgb(43, 255, 0);,也就是绿色。立即变成绿色,说明动画立即开始了,同时动画处于0-20%之间的某一个位置。对于这个位置大家可能有点想法了,但是还不确定!好,再来一个例子。
接下来是-7秒
为啥不是-9 -8 ,连续的可能就看不太出来了。、
当启用动画时,字体颜色突然变成 color:rgb(0, 255, 221);,也就是80%-100%之间的的颜色。
其实到这里我已经偷的添加。-10s时0的颜色,并不是100%的黑色。-7秒时80%的颜色,并不是70%的红色。
结论:动画延迟负值,表示从负值绝对值的下一秒开始执行。也就是-10,执行0秒。-7 执行8秒。,当然这只是我的记忆方法。可能表述是有问题的。
快闪文字的bug解决
在文章开始,已经聊过了现状,我直接上代码了。
在快闪文字那篇文章中,我们设置的动画持续时间是1s。这里我们设置的是6秒,同时动画的延迟也是从-1 的等差。
animation: text 6s infinite ease-in-out;
}
.text:nth-child(1) {
animation-delay: -6s;
}
.text:nth-child(2) {
animation-delay: -5s;
}
.text:nth-child(3) {
animation-delay: -4s;
}
.text:nth-child(4) {
animation-delay: -3s;
}
.text:nth-child(5) {
animation-delay: -2s;
}
.text:nth-child(6) {
animation-delay: -s;
}
这个时候我们的动画也需要改变,这里我们设置了等分的点,0和100%为不透明。17%(100/6)为不透明
@-webkit-keyframes text {
0%,
100% {
filter: blur(0px);
opacity: 1;
}
17%,
{
filter: blur(1em);
opacity: 0;
}
}
这里为啥是17%,因为动画是6秒,设置17%是大概一秒的位置。
第一个文字是-6秒也就是,也就是跳过6秒,从0开始,此时文字不透明。一秒后是不透明,持续5秒的透明。
第二个文字是-5秒,也就是从第6秒开始,此时文字是透明,等1秒后变成不透明,持续1秒不透明,然后下面接着透明!
请注意,动画延迟负值,动画会立即执行!所以第一个文字的动画和第二个文字的动画是一起执行的。第一个文字不透明到透明是一秒,第二个文字的透明到不透明也是一秒。所以第一个文字消失,第二个文字出现。
原创文章,作者:506227337,如若转载,请注明出处:https://blog.ytso.com/tech/cloud/212187.html