442 lines
11 KiB
CSS
442 lines
11 KiB
CSS
.headline:nth-child(1) {
|
|
--color: #e74c3c;
|
|
}
|
|
.headline:nth-child(2) {
|
|
--color: #f5f6fa;
|
|
}
|
|
.headline:nth-child(3) {
|
|
--color: #48dbfb;
|
|
}
|
|
.headline:nth-child(4) {
|
|
--color: #9980FA;
|
|
}
|
|
.headline:nth-child(5) {
|
|
--color: #F79F1F;
|
|
}
|
|
.headline:nth-child(6) {
|
|
--color: #f8c291;
|
|
}
|
|
|
|
.headline--fade .char {
|
|
--name: fade;
|
|
--dur: 2s;
|
|
--del: calc(var(--distance-percent) * 0.15s);
|
|
--td: ease-in-out;
|
|
-webkit-transform-origin: 0 100%;
|
|
transform-origin: 0 100%;
|
|
}
|
|
@-webkit-keyframes fade {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@keyframes fade {
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.headline--ghost .char {
|
|
--name: rise;
|
|
--dur: 3s;
|
|
--del: calc(var(--distance-percent) * 0.125s);
|
|
--tf: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
.headline--ghost .char:after {
|
|
-webkit-animation: ghost var(--dur) ease-in var(--del) infinite;
|
|
animation: ghost var(--dur) ease-in var(--del) infinite;
|
|
content: attr(data-char);
|
|
opacity: 0;
|
|
-webkit-transform-origin: 100% 50%;
|
|
transform-origin: 100% 50%;
|
|
visibility: visible;
|
|
}
|
|
@-webkit-keyframes rise {
|
|
40% {
|
|
-webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
|
|
transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
|
|
}
|
|
50% {
|
|
-webkit-transform: translateY(6%);
|
|
transform: translateY(6%);
|
|
}
|
|
55% {
|
|
-webkit-transform: translateY(-4%);
|
|
transform: translateY(-4%);
|
|
}
|
|
60% {
|
|
-webkit-transform: translateY(2%);
|
|
transform: translateY(2%);
|
|
}
|
|
65% {
|
|
-webkit-transform: translateY(-1%);
|
|
transform: translateY(-1%);
|
|
}
|
|
70% {
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
@keyframes rise {
|
|
40% {
|
|
-webkit-transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
|
|
transform: translateY(-40%) rotate(calc(var(--distance-sine) * 10deg));
|
|
}
|
|
50% {
|
|
-webkit-transform: translateY(6%);
|
|
transform: translateY(6%);
|
|
}
|
|
55% {
|
|
-webkit-transform: translateY(-4%);
|
|
transform: translateY(-4%);
|
|
}
|
|
60% {
|
|
-webkit-transform: translateY(2%);
|
|
transform: translateY(2%);
|
|
}
|
|
65% {
|
|
-webkit-transform: translateY(-1%);
|
|
transform: translateY(-1%);
|
|
}
|
|
70% {
|
|
-webkit-transform: translateY(0%);
|
|
transform: translateY(0%);
|
|
}
|
|
}
|
|
@-webkit-keyframes ghost {
|
|
8% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
opacity: 0.25;
|
|
-webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
|
|
transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
|
|
}
|
|
60%, 100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-200%);
|
|
transform: translateY(-200%);
|
|
}
|
|
}
|
|
@keyframes ghost {
|
|
8% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(0);
|
|
transform: translateY(0);
|
|
}
|
|
40% {
|
|
opacity: 0.25;
|
|
-webkit-transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
|
|
transform: translateY(-30%) rotate(calc(var(--distance-sine) * -10deg));
|
|
}
|
|
60%, 100% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-200%);
|
|
transform: translateY(-200%);
|
|
}
|
|
}
|
|
.headline--rock .char {
|
|
--name: rock;
|
|
--dur: 2s;
|
|
--td: ease-in-out;
|
|
-webkit-transform-origin: 0 100%;
|
|
transform-origin: 0 100%;
|
|
}
|
|
@-webkit-keyframes rock {
|
|
0%, 100% {
|
|
-webkit-transform: rotate(-10deg);
|
|
transform: rotate(-10deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(-18deg);
|
|
transform: rotate(-18deg);
|
|
}
|
|
}
|
|
@keyframes rock {
|
|
0%, 100% {
|
|
-webkit-transform: rotate(-10deg);
|
|
transform: rotate(-10deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(-18deg);
|
|
transform: rotate(-18deg);
|
|
}
|
|
}
|
|
.headline--sail .word {
|
|
--dur: 5s;
|
|
}
|
|
.headline--sail .word:before, .headline--sail .word:after {
|
|
-webkit-animation: wave var(--dur) linear infinite;
|
|
animation: wave var(--dur) linear infinite;
|
|
background-image: radial-gradient(circle at 20px -30px, transparent 40px, var(--color) 41px);
|
|
background-repeat: repeat-x;
|
|
background-size: 40px 100%;
|
|
content: '';
|
|
height: 150%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 90%;
|
|
width: 200%;
|
|
z-index: 2;
|
|
}
|
|
.headline--sail .word:after {
|
|
-webkit-animation-duration: calc(var(--dur) * 1.4);
|
|
animation-duration: calc(var(--dur) * 1.4);
|
|
opacity: 0.8;
|
|
top: 70%;
|
|
}
|
|
.headline--sail .char {
|
|
--name: sail;
|
|
--del: calc(var(--char-index) * -0.15s);
|
|
--tf: linear;
|
|
}
|
|
@-webkit-keyframes sail {
|
|
25% {
|
|
-webkit-transform: rotate(-1deg) translateY(2%);
|
|
transform: rotate(-1deg) translateY(2%);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(0) translateY(0);
|
|
transform: rotate(0) translateY(0);
|
|
}
|
|
75% {
|
|
-webkit-transform: rotate(1deg) translateY(1%);
|
|
transform: rotate(1deg) translateY(1%);
|
|
}
|
|
}
|
|
@keyframes sail {
|
|
25% {
|
|
-webkit-transform: rotate(-1deg) translateY(2%);
|
|
transform: rotate(-1deg) translateY(2%);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(0) translateY(0);
|
|
transform: rotate(0) translateY(0);
|
|
}
|
|
75% {
|
|
-webkit-transform: rotate(1deg) translateY(1%);
|
|
transform: rotate(1deg) translateY(1%);
|
|
}
|
|
}
|
|
@-webkit-keyframes wave {
|
|
to {
|
|
-webkit-transform: translateX(-200px);
|
|
transform: translateX(-200px);
|
|
}
|
|
}
|
|
@keyframes wave {
|
|
to {
|
|
-webkit-transform: translateX(-200px);
|
|
transform: translateX(-200px);
|
|
}
|
|
}
|
|
.headline--shiver .word {
|
|
--name: shiver;
|
|
--dur: 3s;
|
|
--td: linear;
|
|
}
|
|
.headline--shiver .char {
|
|
--name: shiver-letter;
|
|
--del: calc(var(--char-index) * -0.0125s);
|
|
--dur: 140ms;
|
|
--td: linear;
|
|
}
|
|
@-webkit-keyframes shiver {
|
|
1% {
|
|
-webkit-transform: translateX(2%);
|
|
transform: translateX(2%);
|
|
}
|
|
2% {
|
|
-webkit-transform: translateX(-2%);
|
|
transform: translateX(-2%);
|
|
}
|
|
3% {
|
|
-webkit-transform: translateX(3%);
|
|
transform: translateX(3%);
|
|
}
|
|
4% {
|
|
-webkit-transform: translateX(-3%);
|
|
transform: translateX(-3%);
|
|
}
|
|
5% {
|
|
-webkit-transform: translateX(4%);
|
|
transform: translateX(4%);
|
|
}
|
|
6% {
|
|
-webkit-transform: translateX(-4%);
|
|
transform: translateX(-4%);
|
|
}
|
|
7% {
|
|
-webkit-transform: translateX(3%);
|
|
transform: translateX(3%);
|
|
}
|
|
8% {
|
|
-webkit-transform: translateX(-3%);
|
|
transform: translateX(-3%);
|
|
}
|
|
9% {
|
|
-webkit-transform: translateX(2%);
|
|
transform: translateX(2%);
|
|
}
|
|
10% {
|
|
-webkit-transform: translateX(-2%);
|
|
transform: translateX(-2%);
|
|
}
|
|
11% {
|
|
-webkit-transform: translateX(1%);
|
|
transform: translateX(1%);
|
|
}
|
|
12% {
|
|
-webkit-transform: translateX(0%);
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
@keyframes shiver {
|
|
1% {
|
|
-webkit-transform: translateX(2%);
|
|
transform: translateX(2%);
|
|
}
|
|
2% {
|
|
-webkit-transform: translateX(-2%);
|
|
transform: translateX(-2%);
|
|
}
|
|
3% {
|
|
-webkit-transform: translateX(3%);
|
|
transform: translateX(3%);
|
|
}
|
|
4% {
|
|
-webkit-transform: translateX(-3%);
|
|
transform: translateX(-3%);
|
|
}
|
|
5% {
|
|
-webkit-transform: translateX(4%);
|
|
transform: translateX(4%);
|
|
}
|
|
6% {
|
|
-webkit-transform: translateX(-4%);
|
|
transform: translateX(-4%);
|
|
}
|
|
7% {
|
|
-webkit-transform: translateX(3%);
|
|
transform: translateX(3%);
|
|
}
|
|
8% {
|
|
-webkit-transform: translateX(-3%);
|
|
transform: translateX(-3%);
|
|
}
|
|
9% {
|
|
-webkit-transform: translateX(2%);
|
|
transform: translateX(2%);
|
|
}
|
|
10% {
|
|
-webkit-transform: translateX(-2%);
|
|
transform: translateX(-2%);
|
|
}
|
|
11% {
|
|
-webkit-transform: translateX(1%);
|
|
transform: translateX(1%);
|
|
}
|
|
12% {
|
|
-webkit-transform: translateX(0%);
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
@-webkit-keyframes shiver-letter {
|
|
25% {
|
|
-webkit-transform: translateY(1%);
|
|
transform: translateY(1%);
|
|
}
|
|
50% {
|
|
-webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
|
|
transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
|
|
}
|
|
75% {
|
|
-webkit-transform: translateY(1%);
|
|
transform: translateY(1%);
|
|
}
|
|
}
|
|
@keyframes shiver-letter {
|
|
25% {
|
|
-webkit-transform: translateY(1%);
|
|
transform: translateY(1%);
|
|
}
|
|
50% {
|
|
-webkit-transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
|
|
transform: translate(calc(var(--distance-percent) * 1%), calc(var(--distance-percent) * 1%));
|
|
}
|
|
75% {
|
|
-webkit-transform: translateY(1%);
|
|
transform: translateY(1%);
|
|
}
|
|
}
|
|
.headline--yell .char {
|
|
--name: yell;
|
|
--dur: 3s;
|
|
--tf: ease;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
@-webkit-keyframes yell {
|
|
3% {
|
|
-webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
}
|
|
6% {
|
|
-webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
}
|
|
12% {
|
|
-webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
}
|
|
18% {
|
|
-webkit-transform: scaleY(1) translateY(-2%);
|
|
transform: scaleY(1) translateY(-2%);
|
|
}
|
|
25% {
|
|
-webkit-transform: scaleY(0.98);
|
|
transform: scaleY(0.98);
|
|
}
|
|
50% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
75% {
|
|
-webkit-transform: scale(0.98);
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
@keyframes yell {
|
|
3% {
|
|
-webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
}
|
|
6% {
|
|
-webkit-transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
transform: scale(calc(1 * var(--distance-percent) + 1.2)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
}
|
|
12% {
|
|
-webkit-transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
transform: scale(calc(1 * var(--distance-percent) + 1.5)) rotate(calc(15deg * var(--distance-sine))) translateY(-10%);
|
|
}
|
|
18% {
|
|
-webkit-transform: scaleY(1) translateY(-2%);
|
|
transform: scaleY(1) translateY(-2%);
|
|
}
|
|
25% {
|
|
-webkit-transform: scaleY(0.98);
|
|
transform: scaleY(0.98);
|
|
}
|
|
50% {
|
|
-webkit-transform: scaleY(1);
|
|
transform: scaleY(1);
|
|
}
|
|
75% {
|
|
-webkit-transform: scale(0.98);
|
|
transform: scale(0.98);
|
|
}
|
|
}
|