document.querySelectorAll('.fade-in-section').forEach(section => { observer.observe(section); }); 加载动画 在等待数据时显示加载动画可以提升用户体验: <!-- 圆形加载动画 --> @keyframes spin { to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; }...
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 0.3s ease-out forwards; } 性能优化 在社交媒体信息流中,性能优化就像是展览的后勤保障,需要在用户无感知的情况下保持流畅: //...
Set the starting opacity of an animation using thefade-in-{amount}utilities. Button AButton BButton CButton C Learn more in theenter animation opacitydocumentation. Changing enter animation starting rotation Set the starting rotation of an animation using thespin-in-{amount}utilities. Button A...
fadeInOut: { "0%, 100%": { opacity: "0", visibility: "hidden" }, "50%": { opacity: "1", visibility: "visible" }, }, }, animation: { fadeInOut: "fadeInOut 1s ease-in-out forwards", }, }, }, plugins: [ require("@tailwindcss/forms")({ strategy: "class", }), ],...
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 ...
-- 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! --> Installation Install the plugin from npm: npm install -D tailwindcss-an...
-- 摇晃效果 -->@keyframesshake{0%, 100%{transform:translateX(0);}25%{transform:translateX(-8px);}75%{transform:translateX(8px);}}.animate-shake{animation:shake 0.5scubic-bezier(.36,.07,.19,.97)both;} 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17...
// tailwind.config.jsmodule.exports = {variants:{// ...-animation:['responsive'],+animation:['responsive', 'hover', 'focus'],}} Disabling If you don't plan to use theanimationutilities in your project, you can disable them entirely by setting theanimationpropertytofalsein thecorePluginsse...
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...
animation transition animate animated animatecss animate.css fade slide zoom View more thejameskyle• 1.0.7 • a year ago • 2,029 dependents • MITpublished version 1.0.7, a year ago2029 dependents licensed under $MIT 7,550,406 ...