/Knowledge/sources/honojs__hono/llms-full/css-helper-keyframes--366533bb6357.md
css Helper: keyframes - hono-docs
css Helper: keyframes Source evidence: /Sources/honojs hono/provenance.md Canonical citation: https://hono.dev/llms full.txt keyframes Summary You can use ke...
css Helper: keyframes
Source evidence: /Sources/honojs__hono/provenance.md Canonical citation: https://hono.dev/llms-full.txt#keyframes
Summary
You can use keyframes to write the contents of @keyframes. In this case, fadeInAnimation will be the name of the animation. ```tsx const fadeInAnimation = keyframesfrom { opacity: 0; } to { opacity: 1; } const headerClass = css...
Content
You can use keyframes to write the contents of @keyframes. In this case, fadeInAnimation will be the name of the animation.
const fadeInAnimation = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`
const headerClass = css`
animation-name: ${fadeInAnimation};
animation-duration: 2s;
`
const Header = () => <a class={headerClass}>Hello!</a>
Metadata
{
"chunk_index": 0,
"citation": "https://hono.dev/llms-full.txt#keyframes",
"coverage_role": "overview",
"qualified_title": "Hono / llms-full / css Helper > `keyframes`",
"retrieved_at": "2026-07-02T05:51:01Z",
"section_index": 698,
"source_id": "/honojs/hono",
"source_type": "llms_full",
"target_label": "llms-full",
"title": "css Helper: keyframes",
"upstream_url": "https://hono.dev/llms-full.txt",
"version": "2026"
}
Kinic Wiki