Web animation offers a way to grab people’s attention and draw them further into a website. There are lots of tools out there to create free animations but Shift.css is one of the newest in the bunch.
Read Also: 38 Inspiring CSS3 Animation Demos
It’s a free open source framework made for creating dynamic animations within any container. And these animations aren’t locked into one sequence. You can actually build custom animations for each element in the block and apply these in a certain order.
The Shift demo page can show you much better than I can explain in words.
One thing you’ll notice is that each element inside the container is a separate HTML element. Whether it’s an SVG or an image or whatever, you can animate everything separately to create your own custom animation effect.
The library comes with two files, a
.js library, and both need to be added to your document head.
I can’t find any GitHub repo for this project, so you’ll need to download the files directly from the Shift.css website.
The next step is to define a container element with some contents. Class names are important so every animating element needs to have the class
<div id="shift-container"> <div id="div1" class="shift-element"> <div id="div2" class="shift-element"></div> <div id="div3" class="shift-element"></div> </div> </div>
Along with these classes, you can also add HTML5 data attributes to define how the animation works. Right now there are only three but they should be enough to customize a full animation effect.
- data-animation: Name of the animation
- data-delay: Total delay(in seconds) before the animation starts
- data-duration: Total length(in seconds) of the animation
The animation name needs to be a predefined animation created for the Shift library. Right now there are 15 animation names to choose from. You can see them listed at the bottom of the Shift.css homepage.
Just copy/paste whatever you want into the animation name setting and you should be good to go! For example, if I wanted to use the exit fade animation I’d add
data-animation="shift_exitFade" as a data attribute to whatever element should animate that way. Easy peasy.
Shift.css is perfect for newer developers who want to create more complex animation styles without writing verbose code from scratch.