CSS-Only Animation for Squarespace скачать в хорошем качестве

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 :)