@emotion/react#keyframes TypeScript Examples

The following examples show how to use @emotion/react#keyframes. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: UploadProgressBar.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
pulseAnimation = keyframes`
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2
  }
  100% {
    opacity: 1;
  }
`
Example #2
Source File: LoadingScreen.tsx    From spacesvr with MIT License 6 votes vote down vote up 
grow = keyframes`
  0% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.8;
  }
`
Example #3
Source File: LoadingScreen.tsx    From spacesvr with MIT License 6 votes vote down vote up 
float = keyframes`
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-15px);
  }

  100% {
    transform: translatey(0px);
  }
`
Example #4
Source File: Snackbar.tsx    From crosshare with GNU Affero General Public License v3.0 6 votes vote down vote up 
slidein = keyframes`
from {
  margin-left: 100%;
}

to {
  margin-left: 0%;
}
`
Example #5
Source File: Video.tsx    From tobira with Apache License 2.0 6 votes vote down vote up 
ActiveIndicator = () => {
    const animation = keyframes({
        "0%": { color: "black" },
        "50%": { color: "var(--accent-color-darker)" },
        "100%": { color: "black" },
    });

    return (
        <div css={{
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: "rgba(255, 255, 255, 0.5)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontSize: 64,
            "& > svg": {
                animation: `${animation} 3s infinite`,
            },
        }}>
            <FiPlay />
        </div>
    );
}
Example #6
Source File: Spinner.tsx    From tobira with Apache License 2.0 6 votes vote down vote up 
Spinner: React.FC<Props> = ({ size = "1em", ...rest }) => (
    <svg
        viewBox="0 0 50 50"
        css={{
            width: size,
            height: size,
            animation: `2s linear infinite none ${keyframes({
                "0%": { transform: "rotate(0)" },
                "100%": { transform: "rotate(360deg)" },
            })}`,
            "& > circle": {
                fill: "none",
                stroke: "black",
                strokeWidth: 4,
                strokeDasharray: 83, // 2/3 of circumference
                strokeLinecap: "round",
            },

        }}
        {...rest}
    >
        <circle cx="25" cy="25" r="20" />
    </svg>
)
Example #7
Source File: Series.tsx    From tobira with Apache License 2.0 6 votes vote down vote up 
WaitingSeriesPage: React.FC = () => {
    const { t } = useTranslation();

    return (
        <div css={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 32 }}>
            <div><FiTruck css={{
                fontSize: 40,
                animation: `500ms steps(2, end) infinite none ${keyframes({
                    "0%": { transform: "translateY(5px)" },
                    "100%": { transform: "none" },
                })}`,
            }}/></div>
            <Card kind="info">{t("series.not-ready.title")}</Card>
            <div css={{ maxWidth: 700 }}>{t("series.not-ready.text")}</div>
        </div>
    );
}
Example #8
Source File: Root.tsx    From tobira with Apache License 2.0 6 votes vote down vote up 
InitialLoading: React.FC = () => {
    const { t } = useTranslation();
    const pulsing = keyframes({
        "0%": { opacity: 0.5 },
        "50%": { opacity: 1 },
        "100%": { opacity: 0.5 },
    });

    return (
        <Outer>
            <Header />
            <Main>
                <div css={{ margin: "auto", marginTop: "min(120px, 20vh)" }}>
                    <div css={{
                        marginTop: 32,
                        animation: `${pulsing} 1.2s infinite`,
                        fontSize: 20,
                    }}>{t("loading")}</div>
                </div>
            </Main>
            <Footer />
        </Outer>
    );
}
Example #9
Source File: TransactionModal.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
zoomOut = keyframes`
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
`
Example #10
Source File: UploadProgressBar.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
greenBarAnimation = keyframes`
  0% {
    opacity: 0.2;
    background-color: ${oldColors.secondary.success[100]};
    transform: scaleX(0);
  }
  75% {
    transform: scaleX(1);
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
`
Example #11
Source File: SkeletonLoader.tsx    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
pulse = keyframes`
  0% {
    transform: translateX(0%);
  }
  49.999% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(-100%);
  }
`
Example #12
Source File: TransactionModal.styles.ts    From atlas with GNU General Public License v3.0 6 votes vote down vote up 
slideAndFadeIn = (loop?: boolean) => keyframes`
  0% {
  width: ${loop ? 0 : '100%'};
  opacity: 1;
}

50% {
  width: 100%;
  opacity: 1;
}

100% {
  width: 100%;
  opacity: 0;
}
`
Example #13
Source File: theme_switcher.styles.ts    From next-eui-starter with Apache License 2.0 5 votes vote down vote up 
rotate = keyframes`
   0% {
     transform: rotate(0);
   }
   100% {
     transform: rotate(360deg);
   }
 `
Example #14
Source File: NanoXScreen.tsx    From celo-web-wallet with MIT License 5 votes vote down vote up 
coinFadeAnim = keyframes`
  0% { opacity: 0; }
  50% { opacity: 0; } 
  90% { opacity: 1; }
  100% { opacity: 0; }
`
Example #15
Source File: UsbCable.tsx    From celo-web-wallet with MIT License 5 votes vote down vote up 
plugAnim = keyframes`
  0% { transform: translate(0px, 0px); opacity: 0; }
  60% { transform: translate(0px, 0px); opacity: 1; }
  85% { transform: translate(-50px, 0px); opacity: 1; }
  100% { transform: translate(-50px, 0px); opacity: 0; }
`
Example #16
Source File: Spinner.styles.ts    From atlas with GNU General Public License v3.0 5 votes vote down vote up 
spin = keyframes`
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`
Example #17
Source File: Cell.tsx    From crosshare with GNU Affero General Public License v3.0 5 votes vote down vote up 
blink = keyframes`
from, to {
  background-color: transparent;
}
50% {
  background-color: var(--text);
}
`
Example #18
Source File: LoaderLines.tsx    From lightning-terminal with MIT License 5 votes vote down vote up 
pulsing3 = keyframes`
  0% { opacity: 0.35; }
  50% { opacity: 0.35; }
  100% { opacity: 1; }
`
Example #19
Source File: LoaderLines.tsx    From lightning-terminal with MIT License 5 votes vote down vote up 
pulsing2 = keyframes`
  0% { opacity: 0.35; }
  50% { opacity: 1; }
  100% { opacity: 0.35; }
`
Example #20
Source File: LoaderLines.tsx    From lightning-terminal with MIT License 5 votes vote down vote up 
pulsing1 = keyframes`
  0% { opacity: 1; }
  50% { opacity: 0.35; }
  100% { opacity: 0.35; }
`
Example #21
Source File: SpinningLoader.tsx    From dashboard with Apache License 2.0 5 votes vote down vote up 
rotateAndHide = keyframes`
  50%{
    border-color: transparent;
  }
  100%{
    transform:rotatez(360deg);
  }
`
Example #22
Source File: SpinningLoader.tsx    From dashboard with Apache License 2.0 5 votes vote down vote up 
rotate = keyframes`
  100%{
    transform:rotatez(-720deg);
  }
`
Example #23
Source File: ellipsis-spinner.tsx    From utopia with MIT License 5 votes vote down vote up 
ellipsis2Anim = keyframes`{
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}`
Example #24
Source File: ellipsis-spinner.tsx    From utopia with MIT License 5 votes vote down vote up 
ellipsis1Anim = keyframes`{
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}`
Example #25
Source File: DeviceClickAnimation.tsx    From celo-web-wallet with MIT License 5 votes vote down vote up 
clickAnim = keyframes`
  0% { opacity: 0.05; transform: translate(0, 0); }
  50% { opacity: 0.5; transform: translate(0, -4px); }
  100% { opacity: 0.7; transform: translate(0, -4px); }
`
Example #26
Source File: Upload.tsx    From tobira with Apache License 2.0 5 votes vote down vote up 
ProgressBar: React.FC<ProgressBarProps> = ({ state }) => {
    // Helper function to create a moving stripe background.
    const animatedStripes = (
        angle: number,
        color0: string,
        color1: string,
        duration: number,
    ) => {
        const size = 30;
        const amountColor0 = 0.4;

        // The input size is the horizontal period basically. But the CSS
        // gradient expect the period in direction of the pattern, so we have
        // to do a little math.
        const realSize = size * Math.sin(Math.abs(angle) / 180 * Math.PI);

        return {
            background: "repeating-linear-gradient("
                + `${angle}deg,`
                + `var(${color0}),`
                + `var(${color0}) ${realSize * amountColor0}px,`
                + `var(${color1}) ${realSize * amountColor0}px,`
                + `var(${color1}) ${realSize}px)`,
            backgroundSize: `calc(100% + ${size}px) 100%`,
            animation: `${duration}s linear infinite none ${keyframes({
                "0%": { backgroundPositionX: -30 },
                "100%": { backgroundPositionX: 0 },
            })}`,
        };
    };

    const shared = {
        width: "100%",
        height: 12,
        borderRadius: 6,
        overflow: "hidden",
    };

    if (state === "progressing") {
        return <div css={{
            ...shared,
            ...animatedStripes(-45, "--happy-color", "--happy-color-lighter", 1.5),
        }} />;
    } else if (state === "waiting") {
        return <div css={{
            ...shared,
            ...animatedStripes(45, "--accent-color-darker", "--accent-color", 4),
        }} />;
    } else {
        return (
            <div css={{
                ...shared,
                backgroundColor: "var(--grey92)",
            }}>
                <div css={{
                    height: "100%",
                    transition: "width 200ms",
                    width: `${state * 100}%`,
                    backgroundColor: "var(--happy-color-lighter)",
                }} />
            </div>
        );
    }
}
Example #27
Source File: LoadingIndicator.tsx    From celo-web-wallet with MIT License 5 votes vote down vote up 
pulse = keyframes`
  0% { opacity: 0; }
  75% { opacity: 1; } 
  100% { opacity: 0; } 
`
Example #28
Source File: Notification.tsx    From celo-web-wallet with MIT License 5 votes vote down vote up 
fadeOut = keyframes`
 0% { opacity: 1; }
 100% { opacity: 0; }
`
Example #29
Source File: index.tsx    From houston with MIT License 5 votes vote down vote up 
hideAnimation = keyframes`
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
`