/Wiki/sources/honojs__hono/2026/https-hono-dev-llms-full-txt-2-using-viewtransit-33c521eb5234-2-using-viewtransition-with-keyframes-s0094-c0001.md
2. Using `viewTransition()` with `keyframes()` (2) - hono-docs
2. Using viewTransition() with keyframes() (2) Source evidence: /Sources/raw/honojs hono/honojs hono.md Canonical citation: https://hono.dev/llms full.txt 2...
2. Using viewTransition() with keyframes() (2)
Source evidence: /Sources/raw/honojshono/honojshono.md Canonical citation: https://hono.dev/llms-full.txt#2-using-viewtransition-with-keyframes
Summary
## Content
```tsx
import { useState, startViewTransition } from 'hono/jsx'
import { viewTransition } from 'hono/jsx/dom/css'
import { css, keyframes, Style } from 'hono/css'
const rotate = keyframes`
from {
rotate: 0deg;
}
to {
rotate: 360deg;
}
`
export default function App() {
const [showLargeImage, setShowLargeImage] = useState(false)
const [transitionNameClass] = useState(() =>
viewTransition(css`
::view-transition-old() {
animation-name: ${rotate};
}
::view-transition-new() {
animation-name: ${rotate};
}
`)
)
return (
<>
<Style />
<button
onClick={() =>
startViewTransition(() =>
setShowLargeImage((state) => !state)
)
}
>
Click!
</button>
<div>
{!showLargeImage ? (
<img src='https://hono.dev/images/logo.png' />
) : (
<div
class={css`
${transitionNameClass}
background: url('https://hono.dev/images/logo-large.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 600px;
height: 600px;
`}
></div>
)}
</div>
</>
)
}
Kinic Wiki