CSS-Only Animation for Squarespace
Did you know you can animate with CSS? Here are our favorite CSS-only animation hacks for Squarespace.
Original post:
https://ajmexperience.com/learn-posts...
For more CSS code to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
HERE'S THE CODE:
Animations triggered on page load:
// FADE IN //
#BLOCK-ID {
opacity: 0;
animation: fade-in 1s ease-in forwards; }
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }}
// SLIDE FROM LEFT //
#BLOCK-ID {
transform: translateX(-100%);
animation: slide-in-left 1s ease-in forwards; }
@keyframes slide-in-left {
from { transform: translateX(-100%); }
to { transform: translateX(0); } }
// BOUNCE //
#BLOCK-ID {
animation: bounce 1s ease-in-out infinite; }
@keyframes bounce { 0%, 100% {
transform: translateY(0); } 50% {
transform: translateY(-20px); } }
// ROTATE //
#BLOCK-ID {
animation: rotate 1s linear infinite; }
@keyframes rotate { 0% {
transform: rotate(0deg); } 100% {
transform: rotate(360deg); } }
Animations triggered by hover:
// SHIFT A BLOCK ON HOVER //
#BLOCK-ID {
transition: transform 0.3s ease; }
#BLOCK-ID:hover {
transform: translateY(5px); }
// ZOOM PHOTO WITHIN FRAME ON HOVER //
#BLOCK-ID:hover img { transform: scale(1.1) !important;
transition: all ease-in-out 0.8s !important; }
// GROW BLOCK ON HOVER //
#BLOCK-ID:hover { transform: scale(1.05) !important;
transition: all ease-in-out 0.7s !important; }
// ROTATE BLOCK ON HOVER //
#BLOCK-ID:hover { transform: rotate(5deg) }
// SKEW TEXT ON HOVER //
#BLOCK-ID:hover { transform: skewY(-10deg); }
——————
New to CSS?
CHECK OUT OUR OTHER FREE RESOURCES TO HELP GET YOU STARTED:
The Ultimate Squarespace CSS Cheat Sheet
https://www.ajmexperience.com/learn-p...
Squarespace CSS 101
https://www.ajmexperience.com/learn-p...
How to find block, collection, and section IDs
https://www.ajmexperience.com/learn-p...
How to target block, collection, and section IDs
https://www.ajmexperience.com/learn-p...
Deep dive into CSS padding vs margin
https://www.ajmexperience.com/learn-p...
Apply any Squarespace CSS to mobile only
https://www.ajmexperience.com/learn-p...
WANT MORE?
Here are some of our favorite animated plugins using CSS:
Animated number counter (also uses code injection)
https://www.ghostplugins.com/products...
Shape shifting images
https://www.ghostplugins.com/products...
Add to cart button bounce
https://www.ghostplugins.com/free-plu...
Button block shake on hover
https://www.ghostplugins.com/free-plu...
Flip social icons on hover
https://www.ghostplugins.com/free-plu...
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)