You Actually CAN Build Animations with TailwindCSS

Автор: Tom Is Loading

Загружено: 2024-05-15

Просмотров: 20638

Описание:

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ https://www.hover.dev

TailwindCSS includes a couple of animations by default, but what if you want to add more? What if you want to define your own parameters for them, like easing functions and delay? Today we'll learn how

#tailwindcss #programming #webdev

📚 Video Links
Source code: https://github.com/TomIsLoading/tailw...
TailwindCSS Animate Plugin: https://github.com/jamiebuilds/tailwi...

🔗 My Links
TikTok:   / tomisloading
Instagram:   / tomisloading
GitHub: https://github.com/TomIsLoading
Twitter:   / tomisloading
Discord & more: https://linktr.ee/tomisloading
Portfolio templates: https://tomisloading.gumroad.com/

0:00 - Introduction
0:56 - Extend Tailwinds basic animations
2:07 - Defining animations inline
2:34 - Creating custom animations
4:00 - Setting animation properties with the tailwindcss animate plugin
7:27 - Play & pause animations

You Actually CAN Build Animations with TailwindCSS

Доступные форматы для скачивания:

Скачать видео mp4

Информация по загрузке:

Скачать аудио mp3

Похожие видео

The Advanced TailwindCSS Crash Course

The Advanced TailwindCSS Crash Course

Анимированный градиент границы TailwindCSS (ПОТРЯСАЮЩЕ!)

Анимированный градиент границы TailwindCSS (ПОТРЯСАЮЩЕ!)

8 классов TailwindCSS, которые я хотел бы найти раньше

8 классов TailwindCSS, которые я хотел бы найти раньше

10 трюков с попутным ветром, которые вам НУЖНО знать!

10 трюков с попутным ветром, которые вам НУЖНО знать!

Go Middleware Explained | JSON & Session Middleware in a Guess Game API - (18)

Go Middleware Explained | JSON & Session Middleware in a Guess Game API - (18)

Tailwind против Vanilla CSS — стоит ли пересмотреть свое решение?

Tailwind против Vanilla CSS — стоит ли пересмотреть свое решение?

My Top 5 Techniques for Web Animation

My Top 5 Techniques for Web Animation

Tailwind CSS: Displaying Table Content At Smaller Screen Sizes

Tailwind CSS: Displaying Table Content At Smaller Screen Sizes

Создание размытых анимированных фоновых фигур с помощью Tailwind CSS

Создание размытых анимированных фоновых фигур с помощью Tailwind CSS

Кто пишет код лучше всех? Сравнил GPT‑5.2, Opus 4.5, Sonnet 4.5, Gemini 3, Qwen 3 Max, Kimi, GLM

Кто пишет код лучше всех? Сравнил GPT‑5.2, Opus 4.5, Sonnet 4.5, Gemini 3, Qwen 3 Max, Kimi, GLM

AmneziaWG: Убийца платных VPN? Полный гайд по настройке. Нейросети без VPN. ChatGPT, Gemini обход

AmneziaWG: Убийца платных VPN? Полный гайд по настройке. Нейросети без VPN. ChatGPT, Gemini обход

120 МИЛЛИАРДОВ: КТО и Зачем создал БИТКОИН? Тайна Сатоши Накамото

120 МИЛЛИАРДОВ: КТО и Зачем создал БИТКОИН? Тайна Сатоши Накамото

#3: React Hooks — useRef

#3: React Hooks — useRef

Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]

Advanced TailwindCSS Techniques You Have To Know?! [8 concepts]

Изучите анимацию границ CSS за 6 минут

Изучите анимацию границ CSS за 6 минут

TailwindCSS Is Ugly. Here's How To Deal With It.

TailwindCSS Is Ugly. Here's How To Deal With It.

10 лучших CSS-стилей, которые взорвут вам мозг

10 лучших CSS-стилей, которые взорвут вам мозг

Tailwind CSS Plugins I Wish I knew Sooner

Tailwind CSS Plugins I Wish I knew Sooner

cn() - Every Tailwind Coder Needs It (clsx + twMerge)

cn() - Every Tailwind Coder Needs It (clsx + twMerge)

Advanced Sortable Drag and Drop with React & TailwindCSS

Advanced Sortable Drag and Drop with React & TailwindCSS