Keyframes

向引擎註冊 CSS @keyframes 動畫。

PikaCSS 讓你在引擎設定中定義關鍵影格動畫。動畫名稱會註冊到自動完成，而每一條 @keyframes 規則只有在某個 animation 或 animation-name 原子樣式參照到它的名稱時，才會以 preflight CSS 的形式輸出，未使用的關鍵影格會從輸出中剔除。把 pruneUnused: false 設起來（設定層級的預設值，或透過 tuple 的第四個元素／物件形式的 pruneUnused 欄位針對個別定義設定），就能一律輸出某條 keyframes 規則，例如當它被外部 CSS 使用時。

設定

keyframes 可以定義成 tuple 或物件：

import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  keyframes: {
    definitions: [
      // tuple 形式：[name, frames]
      ['fade-in', {
        from: { opacity: '0' },
        to: { opacity: '1' },
      }],

      // 使用百分比
      ['slide-in', {
        '0%': { transform: 'translateX(-100%)' },
        '100%': { transform: 'translateX(0)' },
      }],

      // 只有名稱（影格定義在別處，例如在 CSS 中）
      'spin',
    ],
  },
})

在你的樣式中使用動畫名稱：

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

範例

import { defineEngineConfig } from '@pikacss/core'

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

下一步

• 選擇器：建立自訂的選擇器對應。
• 變數：定義 CSS 自訂屬性。