CSS Animation Generator

@keyframes

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

animation shorthand

fade-in 0.8s ease-out 0s 1 normal forwards

Full CSS

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .animated-fade-in { animation: fade-in 0.8s ease-out 0s 1 normal forwards; }

HTML inline style

style="animation: fade-in 0.8s ease-out 0s 1 normal forwards;"

Tailwind note

/* Add keyframes to global CSS, then use arbitrary animation */ animate-[fade-in_0.8s_ease-out]