keyframes

keyfames is a direct re-export of the @emotion function.

import { keyframes } from "tss-react";
import { tss } from "tss";

const myAnimation = keyframes`
    60%, 100% {
        opacity: 0;
    }
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
`;

const useStyles = tss.create({
    "svg": {
        "& g": {
            "opacity": 0,
            "animation": `${myAnimation} 3.5s infinite ease-in-out`
        }
    }
});

You can also use object notation:

import { keyframes } from "tss-react";

const myAnimation = keyframes({
    "60%, 100%": {
        "opacity": 0
    },
    "0%": {
        "opacity": 0
    },
    "40%": {
        "opacity": 1
    }
});

Last updated