text-flicker entrace animation on the H1

This commit is contained in:
Thomas Smith 2022-09-26 18:41:39 -04:00
parent 0da7ed7f6a
commit fb27501a9f
2 changed files with 49 additions and 0 deletions

View file

@ -55,6 +55,7 @@
<link rel="stylesheet" href="/css/footer.css"> <link rel="stylesheet" href="/css/footer.css">
<link rel="stylesheet" href="/css/package-grid.css"> <link rel="stylesheet" href="/css/package-grid.css">
<link rel="stylesheet" href="/css/buttons.css"> <link rel="stylesheet" href="/css/buttons.css">
<link rel="stylesheet" href="/css/text-flicker.css">
<link <link
rel="stylesheet" rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"

View file

@ -0,0 +1,48 @@
h1{
animation: text-flicker 3s linear;
transition: 0.2s ease-out;
}
@keyframes text-flicker {
0% {
opacity:0.1;
}
2% {
opacity:1;
}
8% {
opacity:0.1;
}
9% {
opacity:1;
}
12% {
opacity:0.1;
}
20% {
opacity:1;
}
25% {
opacity:0.3;
}
30% {
opacity:1;
}
70% {
opacity:0.7;
}
72% {
opacity:0.2;
}
77% {
opacity:.9;
}
100% {
opacity:.9;
}
}