CSS 关键帧的等待时间
Wait time in a CSS keyframe
在我的 CSS 代码中,我使用关键帧为文本设置动画。
我想添加一个 FadeOut 以允许文本的 FadeIn,在 10 秒内显示这个,然后 FadeOut
setInterval(function() {
let text = document.querySelector('#text');
text.setAttribute('data-text',text.innerHTML);
document.body.innerHTML += '';
var lr = document.querySelector('html');
window.addEventListener('click',()=>{
var newone = lr.cloneNode(true);
lr.parentNode.replaceChild(newone, lr);
lr = newone;
});
}, 10000);
:root {
--color-1: #f4e874;
--color-2: #ffb56d;
--color-3: #ff868b;
--color-4: #e16fb2;
--color-5: #896ec9;
--color-6: #896ec9;
--color-7: #9165d2;
--color-8: #9b5bda;
--color-9: #a74ddf;
--color-10: #b538e3;
--color-11: #f4e874;
--color-12: #f6dd63;
--color-13: #f8d152;
--color-14: #fac542;
--color-15: #fdb833;
}
html {
height: 100%; display: flex;
}
body {
margin-top: 200px;
overflow: hidden;
}
@import url('https://fonts.googleapis.com/css?family=Work+Sans:800');
#text {
font-family: 'Work Sans', sans-serif;
font-weight: 800;
font-size: 7vw;
transform:skewY(-5deg);
visibility:hidden;
background: linear-gradient(219deg,
var(--color-1) 19%,
transparent 19%,transparent 20%,
var(--color-2) 20%, var(--color-2) 39%,
transparent 39%,transparent 40%,
var(--color-3) 40%,var(--color-3) 59% ,
transparent 59%,transparent 60%,
var(--color-4) 60%, var(--color-4) 79%,
transparent 79%, transparent 80%,
var(--color-5) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation : display 1s cubic-bezier(.6,.0,.15,1) 4s forwards;
position: relative;
}
#text:before,
#text:after {
content: attr(data-text);
visibility: visible;
background: linear-gradient(219deg,
var(--color-6) 19%,
transparent 19%,transparent 20%,
var(--color-7) 20%, var(--color-7) 39%,
transparent 39%,transparent 40%,
var(--color-8) 40%,var(--color-8) 59% ,
transparent 59%,transparent 60%,
var(--color-9) 60%, var(--color-9) 79%,
transparent 79%, transparent 80%,
var(--color-10) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
position: absolute;
left: 0;
display: block;
top: 0;
bottom: 0;
z-index: 3;
}
#text:before {
background: linear-gradient(219deg,
var(--color-6) 19%,
transparent 19%,transparent 20%,
var(--color-7) 20%, var(--color-7) 39%,
transparent 39%,transparent 40%,
var(--color-8) 40%,var(--color-8) 59% ,
transparent 59%,transparent 60%,
var(--color-9) 60%, var(--color-9) 79%,
transparent 79%, transparent 80%,
var(--color-10) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
animation: move-left 2.5s cubic-bezier(.6,.0,.15,1),
blur 1s linear 3s forwards;
}
#text:after {
background: linear-gradient(219deg,
var(--color-11) 19%,
transparent 19%,transparent 20%,
var(--color-12) 20%, var(--color-12) 39%,
transparent 39%,transparent 40%,
var(--color-13) 40%,var(--color-13) 59% ,
transparent 59%,transparent 60%,
var(--color-14) 60%, var(--color-14) 79%,
transparent 79%, transparent 80%,
var(--color-15) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
animation: move-right 3s cubic-bezier(.6,.0,.15,1),
blur 1s linear 3s forwards;
}
@keyframes move-left{
from{
transform:translate(-1000%,-120%);
}50%{
transform:translate(0%,-120%);
}
100%{
transform:translate(0%,0%);
}
}
@keyframes move-right{
from{
transform:translate(1000%,80%);
}50%{
transform:translate(0%,80%);
}100%{
transform:translate(0%,0%);
}
}
@keyframes blur{
from{
opacity:1;
}
to{
opacity: 0;
}
}
@keyframes display{
from{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}to{
visibility: visible;
transform:skewY(-5deg) scale(1);
}
}
<div id ="text">LE LIVE VA COMMENCER</div>
我希望此动画出现在我的“显示”关键帧上(在代码段中可见)
所以我尝试替换
@keyframes display{
from{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}to{
visibility: visible;
transform:skewY(-5deg) scale(1);
}
}
到
@keyframes display{
0%{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}50%{
visibility: visible;
transform:skewY(-5deg) scale(1);
} 1000%{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}
}
但是文字出现后直接在fadeOut中消失
我应该如何制作关键帧才能在淡入和淡出之间有大约 10 秒的等待时间?
谢谢!
您可以制作一个淡入关键帧和淡出关键帧,然后在淡出时设置动画延迟。
animation-name: fade-in, fade-out;
animation-duration: 3s;
animation-delay: 0ms, 9000ms;
如果你真的想在同一个动画中使用它,你必须用百分比和 animation-duration 来计算它。
在我的 CSS 代码中,我使用关键帧为文本设置动画。 我想添加一个 FadeOut 以允许文本的 FadeIn,在 10 秒内显示这个,然后 FadeOut
setInterval(function() {
let text = document.querySelector('#text');
text.setAttribute('data-text',text.innerHTML);
document.body.innerHTML += '';
var lr = document.querySelector('html');
window.addEventListener('click',()=>{
var newone = lr.cloneNode(true);
lr.parentNode.replaceChild(newone, lr);
lr = newone;
});
}, 10000);
:root {
--color-1: #f4e874;
--color-2: #ffb56d;
--color-3: #ff868b;
--color-4: #e16fb2;
--color-5: #896ec9;
--color-6: #896ec9;
--color-7: #9165d2;
--color-8: #9b5bda;
--color-9: #a74ddf;
--color-10: #b538e3;
--color-11: #f4e874;
--color-12: #f6dd63;
--color-13: #f8d152;
--color-14: #fac542;
--color-15: #fdb833;
}
html {
height: 100%; display: flex;
}
body {
margin-top: 200px;
overflow: hidden;
}
@import url('https://fonts.googleapis.com/css?family=Work+Sans:800');
#text {
font-family: 'Work Sans', sans-serif;
font-weight: 800;
font-size: 7vw;
transform:skewY(-5deg);
visibility:hidden;
background: linear-gradient(219deg,
var(--color-1) 19%,
transparent 19%,transparent 20%,
var(--color-2) 20%, var(--color-2) 39%,
transparent 39%,transparent 40%,
var(--color-3) 40%,var(--color-3) 59% ,
transparent 59%,transparent 60%,
var(--color-4) 60%, var(--color-4) 79%,
transparent 79%, transparent 80%,
var(--color-5) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation : display 1s cubic-bezier(.6,.0,.15,1) 4s forwards;
position: relative;
}
#text:before,
#text:after {
content: attr(data-text);
visibility: visible;
background: linear-gradient(219deg,
var(--color-6) 19%,
transparent 19%,transparent 20%,
var(--color-7) 20%, var(--color-7) 39%,
transparent 39%,transparent 40%,
var(--color-8) 40%,var(--color-8) 59% ,
transparent 59%,transparent 60%,
var(--color-9) 60%, var(--color-9) 79%,
transparent 79%, transparent 80%,
var(--color-10) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
position: absolute;
left: 0;
display: block;
top: 0;
bottom: 0;
z-index: 3;
}
#text:before {
background: linear-gradient(219deg,
var(--color-6) 19%,
transparent 19%,transparent 20%,
var(--color-7) 20%, var(--color-7) 39%,
transparent 39%,transparent 40%,
var(--color-8) 40%,var(--color-8) 59% ,
transparent 59%,transparent 60%,
var(--color-9) 60%, var(--color-9) 79%,
transparent 79%, transparent 80%,
var(--color-10) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
animation: move-left 2.5s cubic-bezier(.6,.0,.15,1),
blur 1s linear 3s forwards;
}
#text:after {
background: linear-gradient(219deg,
var(--color-11) 19%,
transparent 19%,transparent 20%,
var(--color-12) 20%, var(--color-12) 39%,
transparent 39%,transparent 40%,
var(--color-13) 40%,var(--color-13) 59% ,
transparent 59%,transparent 60%,
var(--color-14) 60%, var(--color-14) 79%,
transparent 79%, transparent 80%,
var(--color-15) 80%);
background-clip: text;
-webkit-background-clip: text;
color: transparent; clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
animation: move-right 3s cubic-bezier(.6,.0,.15,1),
blur 1s linear 3s forwards;
}
@keyframes move-left{
from{
transform:translate(-1000%,-120%);
}50%{
transform:translate(0%,-120%);
}
100%{
transform:translate(0%,0%);
}
}
@keyframes move-right{
from{
transform:translate(1000%,80%);
}50%{
transform:translate(0%,80%);
}100%{
transform:translate(0%,0%);
}
}
@keyframes blur{
from{
opacity:1;
}
to{
opacity: 0;
}
}
@keyframes display{
from{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}to{
visibility: visible;
transform:skewY(-5deg) scale(1);
}
}
<div id ="text">LE LIVE VA COMMENCER</div>
所以我尝试替换
@keyframes display{
from{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}to{
visibility: visible;
transform:skewY(-5deg) scale(1);
}
}
到
@keyframes display{
0%{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}50%{
visibility: visible;
transform:skewY(-5deg) scale(1);
} 1000%{
visibility: hidden;
transform:skewY(-5deg) scale(0);
}
}
但是文字出现后直接在fadeOut中消失
我应该如何制作关键帧才能在淡入和淡出之间有大约 10 秒的等待时间?
谢谢!
您可以制作一个淡入关键帧和淡出关键帧,然后在淡出时设置动画延迟。
animation-name: fade-in, fade-out;
animation-duration: 3s;
animation-delay: 0ms, 9000ms;
如果你真的想在同一个动画中使用它,你必须用百分比和 animation-duration 来计算它。