CSS Animations 101

Tuesday, April 4, 2023
12:00 AM 1:00 AM

Google Calendar ICS

7 Lessons | 49 minutes

CSS Animations 101

Learn the basics of CSS Animations, when and why to use them, and how to use them in Squarespace. We’ll also go through 6 different animations for buttons, images, and icons you can start using today.

Featured

CSS Animations Part 1

Learn when and why to use CSS animations, the difference between animations and transitions, and the basic syntax of how they work.

CSS Animations Part 2

Learn to find a CSS animation on the internet, remove all the fluff, and customize it to your needs.

Infinite Rotating Image

A simple CSS animation that infinitely rotates an image in an image block.

Pulse Animation for Buttons

Call attention to a button with a simple pulse animation.

Bounce Animation for “Keep Scrolling” Icon

Add a bounce animation to your “Keep Scrolling” icon.

Animated Gradient CTA

Animate the background color of the main Call To Action button in your header

Animated Spinning Border

A simple trick to create a four-colored spinning border around a button.

CSS Animations 101

CSS Animations 101

Little Big Details: Text Balancing

Image Caption Styles in Fluid Engine

Sharpen your skills. Get better in Squarespace.

Sharpen your skills.
Get better in Squarespace.