淡入淡出 <!-- 缩放效果 --> 缩放效果 <!-- 旋转效果 --> 旋转效果 <!-- 位移效果 --> 位移效果 <!-- 组合动画 --> 组合动画 <
from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.3s ease-out forwards; } 性能优化 在社交媒体信息流中,性能优化就像是展览的后勤保障,需要在用户无感知的情况下保持流畅: // 虚拟列表实现 class Vi...
Utilities for Tailwind CSS. Latest version: 0.4.0, last published: 12 days ago. Start using tailwindcss-primeui in your project by running `npm i tailwindcss-primeui`. There are 15 other projects in the npm registry using tailwindcss-primeui.
To give an element an enter animation, use theanimate-inutility, in combination with somefade-in,spin-in,zoom-in, andslide-in-fromutilities. Button AButton BButton CButton DButton E Learn more in theenter animationdocumentation. Adding exit animations To give an element an exit animation, us...
tailwindcss-animate A Tailwind CSS plugin for creating beautiful animations. <!-- Add an animated fade and zoom entrance -->...<!-- Add an animated slide to top-left exit -->...<!-- Control animation duration -->...<!-- Control animation delay -->...<!-- And so much more!
A Tailwind CSS plugin for creating beautiful animations - tailwindcss-animate/docs/enter-animation.md at main · jamiebuilds/tailwindcss-animate
Use theanimate-[<value>]syntaxto set theanimationbased on a completely custom value: <!-- ... --> For CSS variables, you can also use theanimate-(<custom-property>)syntax: <!-- ... --> This is just a shorthand foranimate-[var(<custom...
Animation Tailwind CSS version v1.6.0+ Utilities for animating elements with CSS animations. ClassProperties .animate-noneanimation: none; .animate-spinanimation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }...
对于更复杂的动画需求,我们可以使用 CSS 动画: <!-- 脉冲效果 -->@keyframespulse{0%, 100%{transform:scale(1);opacity:1;}50%{transform:scale(1.1);opacity:0.8;}}.animate-pulse{animation:pulse 2scubic-bezier(0.4,0,0.6,1)infinite;}<!-- 弹跳效果 -->@keyframesbounce{0%, 100%{transform:tran...
Set the starting opacity of an animation using the fade-in-{amount} utilities.Button A Button B Button C Button CLearn more in the enter animation opacity documentation.Changing enter animation starting rotationSet the starting rotation of an animation using the spin-in-{amount} utilities.Button...