How to Create Simple Rotate Animation with Custom CSS
Implementing simple CSS animation to your Squarespace site is one of the best ways to create dynamic designs, grab a user’s attention, and make your website more visually appealing. The last thing you want is a beautiful website that leaves visitors feeling like something is missing. Incorporating movement into your site gives that extra oomph you need to make your site stand out from the crowd.
To animate literally means “to bring to life,” so adding an animated element to your website will both delight your visitors and add personality to your brand and website. Delighting your visitors means they will remember you and want to stick around on your website. Since most website visitors decide whether or not to keep scrolling within a matter of seconds, captivating a visitor with an engaging animation keeps them wanting more.
But, does your heart palpitate at the mention of CSS and animation in the same sentence? Is it actually simple? The good news is that, YES, it really is simple, and I’m going to show you just how straightforward it can be.
Add the Element or Icon to your Site
Although you can use this method to animate any image, the process is best suited to a particular type of element or icon. You can find an icon that aligns with your brand on a site such as The Noun Project, or CSS animation is a perfect way to amplify a custom icon set or custom animation that I offer as part of my digital illustration service.
The code you’ll apply to the image block adds a rotation effect, so circular illustrations or icons look especially pleasing to the eye. Keep that in mind when choosing the element you want to animate. Once you’ve identified the perfect illustration, you’ll add it to your site using a standard image block in the Squarespace editor.
Target the Element
Once your image block is added, you’ll need to target the element using the trusty Chrome extension, Squarespace ID Finder. The tool identifies the block ID so you can easily target the block within the code. Basically, using the ID finder allows you to implement the code on the specific block you want to animate. If you don’t have this tool installed, simply drag it to your bookmarks and click it to try it out. Then, click on the block you want to target, and the Finder will automatically copy the block ID.
Add the Code
Here is where the magic happens. It’s time to add the code. Copy the following code, go to Design > Custom CSS, and then paste the code below into the custom CSS section.
@keyframes Rotate
{from { transform: rotate(0deg) }
to { transform: rotate(800deg) } /**change to a higher value for more seamless loop*/
}
#block-yui_3_17_2_1_1658404110543_15861{
position: relative;
animation: Rotate 10s linear infinite; /**change the value to make rotation faster or slower*/
}
Replace the block ID in the code provided with the block ID you copied using the Squarespace ID Finder.
Voila! Once you refresh your screen, your image block should be delightfully spinning. You did it! Now, that really was simple, right?
If adding code to your site feels a bit overwhelming, don’t fret. Book a call! I’m here to help.
