(animation: string)
| 45 | }; |
| 46 | |
| 47 | export const getAnimation = (animation: string) => { |
| 48 | if (!animation) return html``; |
| 49 | |
| 50 | return _( |
| 51 | html``, |
| 52 | appendIf(animation === "fadeIn", [ |
| 53 | css(".text, .desc", { |
| 54 | animation: "fadeIn 1.2s ease-in-out forwards", |
| 55 | }), |
| 56 | css("@keyframes fadeIn", { |
| 57 | from: { opacity: 0 }, |
| 58 | to: { opacity: 1 }, |
| 59 | }), |
| 60 | ]), |
| 61 | appendIf(animation === "scaleIn", [ |
| 62 | css(".text, .desc", { |
| 63 | animation: "scaleIn .8s ease-in-out forwards", |
| 64 | transformOrigin: "center", |
| 65 | }), |
| 66 | css("@keyframes scaleIn", { |
| 67 | from: { transform: `scale(0)` }, |
| 68 | to: { transform: `scale(1)` }, |
| 69 | }), |
| 70 | ]), |
| 71 | appendIf(animation === "blinking", [ |
| 72 | css(".text, .desc", { |
| 73 | animation: "blinking 1.6s step-start 0s infinite", |
| 74 | }), |
| 75 | css("@keyframes blinking", { |
| 76 | "20%": { opacity: 1 }, |
| 77 | "50%": { opacity: 0 }, |
| 78 | "80%": { opacity: 1 }, |
| 79 | }), |
| 80 | ]), |
| 81 | appendIf(animation === "blink", [ |
| 82 | css(".text, .desc", { |
| 83 | animation: "blink .6s step-start 0s backwards", |
| 84 | }), |
| 85 | css("@keyframes blink", { |
| 86 | "10%": { opacity: 1 }, |
| 87 | "25%": { opacity: 0 }, |
| 88 | "40%": { opacity: 1 }, |
| 89 | "55%": { opacity: 0 }, |
| 90 | "70%": { opacity: 0 }, |
| 91 | "80%": { opacity: 1 }, |
| 92 | }), |
| 93 | ]), |
| 94 | appendIf(animation === "twinkling", [ |
| 95 | css(".text, .desc", { |
| 96 | animation: "twinkling 4s ease-in-out infinite", |
| 97 | }), |
| 98 | css("@keyframes twinkling", { |
| 99 | "40%": { opacity: 1 }, |
| 100 | "50%": { opacity: 0.5 }, |
| 101 | "60%": { opacity: 1 }, |
| 102 | "70%": { opacity: 0.5 }, |
| 103 | "80%": { opacity: 1 }, |
| 104 | }), |
no test coverage detected