Twind

Interface: Animation

twind/css.Animation

const bounce = animation('1s ease infinite', {
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)',
  }
})

Callable

▸ Animation(value: string | CSSRules | (context: Context) => string): CSSFactory<Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSProperties | Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSRules>

const bounce = animation('1s ease infinite', {
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)',
  }
})

Parameters:

NameType
valuestring | CSSRules | (context: Context) => string

Returns: CSSFactory<Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSProperties | Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSRules>

Defined in: src/css/index.ts:210

▸ Animation(value: string | CSSRules | (context: Context) => string, waypoints: Record<string, CSSProperties | (context: Context) => CSSProperties> | Directive<string>): Directive<CSSRules>

const bounce = animation('1s ease infinite', {
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)',
  }
})

Parameters:

NameType
valuestring | CSSRules | (context: Context) => string
waypointsRecord<string, CSSProperties | (context: Context) => CSSProperties> | Directive<string>

Returns: Directive<CSSRules>

Defined in: src/css/index.ts:215