Add Text Animation To Your Squarespace Website Using CSS

In this tutorial I show you how to animate text on page load with CSS keyframes. It is an easy and subtle touch to improve the quality of your Squarespace website.

It is a really easy way to take your Squarespace designs to that next level!

How to add the animation to your Squarespace Website

Custom CSS:

.Index-page:first-child .sqs-layout, .Intro .sqs-row {
  -webkit-animation: fade-text-anim 2s ease;
  animation: fade-text-anim 2s ease;
}


@keyframes fade-text-anim {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  25% {
    opacity: 0;
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    -ms-transform: translate3d(0,30px,0);
    -o-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}

If you have any questions or need help implementing this on your site, please feel free to shoot me an email or leave me a comment on YouTube.

Cheers!
Chris