Back to All Events

CSS Animations 101

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.

Previous
March 28

Little Big Details: Text Balancing
Next
April 18

Image Caption Styles in Fluid Engine