CodeLevels
Projects
All projects
Becoming a web developer!
Building mini web apps
DIY services
Backend Development for serious guys!
Mobile and Desktop apps
Web Security
Developer Tools
ML and data science
Growing into AI
Web Games
Modern Web Interfaces
WordPress
QA: application testing
Gamedev
Real-time apps
Roadmaps
All roadmaps
JavaScript
React
Python
Django for web development
Backend & Deployment
Client-Server Architecture
Linux for server development
Kali Linux for security artisans
Advanced Cybersecurity
HTML & CSS
NextJS
Roblox Game Development
Backend Concepts
Job tracks
All job tracks
QA Engineer (+Web Security Specialist)
Courses
Games
Search
Desktop App
Login
CSS Animations
Topic #2 of 18 in "Building mini web apps" progression
HTML/CSS
Updated: Feb 06, 2026
Learning plan
Default
List
Hover for making animations in CSS
Hover practice
Big buttons with hover collection
Hover.css: lots of hovers in one click!
Transition: animation basics
Transition practice
@keyframes: making real animations
@keyframes practice
W3School interactive animations guide: 3 examples
Snake loader animation
Select your input: on focus animation
Typing Text Animation
4 unforgetable cards
3 card with faces
Animate.css: lots of animations, simple use
#1.
Hover for making animations in CSS
#1
#2.
Hover practice
#2
#3.
Big buttons with hover collection
#3
#4.
Hover.css: lots of hovers in one click!
#4
#5.
Transition: animation basics
#5
#6.
Transition practice
#6
#7.
@keyframes: making real animations
#7
#8.
@keyframes practice
#8
#9.
W3School interactive animations guide: 3 examples
#9
#10.
Snake loader animation
#10
#11.
Select your input: on focus animation
#11
#12.
Typing Text Animation
#12
#13.
4 unforgetable cards
#13
#14.
3 card with faces
#14
#15.
Animate.css: lots of animations, simple use
#15
CSS Animations
Search projects
Type a project name
↑
↓
to move
Enter
to open
Esc
to close
Ctrl-I
to search