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
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.

Read more →
CSS Animations Part 2
CSS Animations Part 2

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

Read more →
Infinite Rotating Image
Infinite Rotating Image

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

Read more →
Pulse Animation for Buttons
Pulse Animation for Buttons

Call attention to a button with a simple pulse animation.

Read more →
Bounce Animation for “Keep Scrolling” Icon
Bounce Animation for “Keep Scrolling” Icon

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

Read more →
Animated Gradient CTA
Animated Gradient CTA

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

Read more →
Animated Spinning Border
Animated Spinning Border

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

Read more →
Previous
March 28

Little Big Details: Text Balancing
Next
April 18

Image Caption Styles in Fluid Engine