淡入淡出 <!-- 缩放效果 --> 缩放效果 <!-- 旋转效果 --> 旋转效果 <!-- 位移效果 --> 位移效果 <!--组合动画--> 组合动画
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...
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...
The following is the list of Tailwind CSS Animation Classes that are used to apply smooth animation on elements.ClassCSS Properties animate-none animation: none; animate-spin animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg...
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!
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); } }...
Utilities for animating elements with CSS animations. Quick reference Class Properties 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...
A Tailwind CSS plugin for creating beautiful animations - tailwindcss-animate/docs/enter-animation.md at main · jamiebuilds/tailwindcss-animate
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...