Keyframes

Register CSS @keyframes animations with the engine.

PikaCSS lets you define keyframe animations in your engine configuration. They are rendered as preflight CSS and registered for autocomplete so the animation names are available in your style definitions.

Config

Why the nested key?

The outer keyframes is the plugin configuration field added to EngineConfig via type augmentation. The inner keyframes is the actual keyframes list. This two-level structure keeps each feature's options under a single top-level key.

Keyframes can be defined as tuples or objects:

import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  keyframes: {
    keyframes: [
      // Tuple form: [name, frames]
      ['fade-in', {
        from: { opacity: '0' },
        to: { opacity: '1' },
      }],

      // With percentages
      ['slide-in', {
        '0%': { transform: 'translateX(-100%)' },
        '100%': { transform: 'translateX(0)' },
      }],

      // Name only (frames defined elsewhere, e.g. in CSS)
      'spin',
    ],
  },
})

Use the animation name in your styles:

pika({
  animation: 'fade-in 0.3s ease-in-out',
})

Examples

import { defineEngineConfig } from '@pikacss/core'

export const keyframesConfig = defineEngineConfig({
	keyframes: {
		keyframes: [
			['fade-in', { from: { opacity: '0' }, to: { opacity: '1' } }],
		],
	},
})

Next

• Selectors — create custom selector shortcuts.
• Variables — define CSS custom properties.