Designer
CMS
Ecommerce
Interactions
Memberships
Editor
Logic
SEO
Hosting
Security
Overview
Libraries
Apps
Hire a Certified Partner
Templates
Made in Webflow
Learn
Community
Ebooks
Forum
Blog
Support
LoginContact Sales
Get started — it's free
Made in Webflow

Animated SVG Logo Intro with CSS

Web Bae's avatar
Web Bae
Clone in Webflow119
site profile thumbnail
Open in Webflow
Open live site
Let's explore CSS keyframe animations by animating my SVG logo intro loader as well as a repeating background scroller. We'll learn about SVG properties like defs and mask as well as how to use the @keyframe keyword in CSS to animate different properties like SVG attributes and CSS properties.
Open in Webflow
Open live site
svg
svganimation
css
cssanimation
keyframes
intro
loader
preloader
pageloader
backgroundimage

More sites by Web Bae

See profile
The Greatest Infinite Marquee (HTML + CSS only)
759
7.1k
Moving Gradient Background
587
3.5k
Award Winning Grid Trail Mouse Follow Effect
430
1.2k

Similar sites

author avatar
SVG Animation
13
117
Tullio Luongo
author avatar
mid-city-redevelopment
1
Mid City Redevelopment Alliance
author avatar
Gmail Animated Logo
5
18
Alex Hartan
author avatar
Make CSS Metaballs!
55
108
Vincent Bidaux
author avatar
awwwards-academy-jomor
1
Jeronimo Piquero Saiz
author avatar
Animate SVG Lines with Attributes
143
322
Jonas Arleth
Explore
  • Dashboard
  • Marketplace
  • Hire designers
Learn & get help
  • Support
  • University
  • Courses
  • Blog
  • Ebooks
  • Forum
  • Community
  • Developers
  • Wishlist
  • Status
Company
  • About
  • Careers
  • Sitemap
  • Become an Affiliate
Terms & policy
  • Terms of Service
  • Privacy policy
  • Cookie policy
  • Cookie preferences
Social
Social
Explore
  • Dashboard
  • Marketplace
  • Hire designers
Learn & get help
  • Support
  • University
  • Courses
  • Blog
  • Ebooks
  • Forum
  • Community
  • Developers
  • Wishlist
  • Status
Company
  • About
  • Careers
  • Sitemap
  • Become an Affiliate
Terms & policy
  • Terms of Service
  • Privacy policy
  • Cookie policy
  • Cookie preferences
Social
Social