}, observerOptions); document.querySelectorAll('.fade-in-section').forEach(section => { observer.observe(section); }); 加载动画 在等待数据时显示加载动画可以提升用户体验: <!-- 圆形加载动画 --> @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin ...
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5....
Button AButton BButton CButton DButton E Learn more in theenter animationdocumentation. Adding exit animations To give an element an exit animation, use theanimate-oututility, in combination with somefade-out,spin-out,zoom-out, andslide-out-fromutilities. Button A<...
Button AButton BButton CButton DButton E Learn more in theenter animationdocumentation. Adding exit animations To give an element an exit animation, use theanimate-oututility, in combination with somefade-out,spin-out,zoom-out, andslide-out-fromutilities. Button A<...
To give an element an enter animation, use the animate-in utility, in combination with some fade-in, spin-in, zoom-in, and slide-in-from utilities. Button A Button B Button C Button D Button E Adding multiple enter animations You can apply multiple enter animations at the same time as ...
Button A Button B Button C Button D Button ELearn more in the enter animation documentation.Adding exit animationsTo give an element an exit animation, use the animate-out utility, in combination with some fade-out, spin-out, zoom-out, and slide-out-from utilities....
Uso: Hola mundo Install npm iplugin-tailwindcss-animaciones Weekly Downloads 0 Version 0.0.4 License ISC Unpacked Size 21.2 kB Collaborators Tryon RunKit Reportmalware
animate-ping: This class is used to apply a ping animation by scaling element and making it fade. animate-pulse: This class is used to apply a pusle animation that slightly fade in and out the element. animate-bounce: This class is used to apply a bounce animation that bounce an element...
-- 脉冲效果 -->@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:translateY(0);animation-timing-function:cubic-bezier(...
Add theanimate-pulseutility to make an element gently fade in and out — useful for things like skeleton loaders. Bounce Add