Add Floating Animation To Your Squarespace Website Using CSS

In this video I'll show you how to add a floating effect animation to your Squarespace website using CSS. See the full playlist of tutorials http://bit.ly/sqsptuts ► Make a circular motion floating animation https://youtu.be/O_zHBJOBcic Squarespace Block/Collection Identifier - Handy plugin for Chrome: https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde Some of my other Squarespace animations and effects: ► New Squarespace 2021 updates explained https://youtu.be/Wuna6RuJxnM ► Static background parallax effect: https://youtu.be/Amzi6jt-bx4 ► Typewriter animation: https://youtu.be/UOjEr631S7I ► Add drop shadows to your images: https://youtu.be/w0wom5IP8K4 The CSS 👇👇 YOURBLOCKIDENTIFIERHERE { animation-name: floating; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; margin-left:30px; margin-top: 5px; } @keyframes floating { from { transform: translate(0, 0px); } 65% { transform: translate(0, 15px); } to { transform: translate(0, 0px); } } ________________ ▸ Join my Substack: https://carljohnson.space Want to support my content? Consider donating here: https://www.buymeacoffee.com/carljohnson #Squarespace #CSS #SquarespaceTutorial