LogoLogo
HomeGitHubPlayground
v4
v4
  • ๐Ÿ”งSetup
  • ๐Ÿ”API References
    • tss - the Modern API
    • keyframes
    • <GlobalStyles />
    • makeStyles -> useStyles
    • withStyles
  • โšกSSR
    • Next.js
    • Gatsby
    • Other backends
  • ๐ŸŽฏIncrease specificity
  • ๐Ÿฆฑclasses overrides
  • ๐ŸงนDetecting unused classes
  • ๐Ÿ’ฝEmotion Cache
  • ๐Ÿ’ซNested selectors (ex $ syntax)
  • ๐ŸญMUI Global styleOverrides
  • ๐Ÿ“ฆPublish a module that uses TSS
  • ๐ŸฉณMUI sx syntax
  • ๐Ÿ“ฒReact Native
  • ๐Ÿ†˜Fix broken styles after upgrading to MUI v5 with TSS
  • โฌ†๏ธMigration v3 -> v4
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. API References

keyframes

Previoustss - the Modern APINext<GlobalStyles />

Last updated 1 year ago

Was this helpful?

keyfames is a direct re-export of .

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
    }
});
๐Ÿ”
the @emotion function