最新
动画Fade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 个框架中级
Loading…
An element that springs into place with a bouncy scale on mount.
<style>
@keyframes bounce-in {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); opacity: 1; }
70% { transform: scale(0.92); }
100% { transform: scale(1); opacity: 1; }
}
.bounce-in { animation: bounce-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
.bounce-in { animation: none; opacity: 1; transform: none; }
}
</style>
<div class="bounce-in rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 px-8 py-6 text-center text-lg font-bold text-white shadow-lg">
Welcome aboard
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
children必填 | ReactNode | - | 在组件内部渲染的内容。 |
delayMs | number | 0 | Delay ms |
className | string | '' | 合并到根元素上的额外类名。 |
Set `delayMs` to sequence several entrances. The animation is scale/opacity only and reduced motion shows the final state instantly.