Create Fully Animated Widgets with Shift.css

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.

38 Inspiring CSS3 Animation Demos

.no-js #ref-block-post-11152 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/css3-animation-transition-demos.jpg”); }

38 Inspiring CSS3 Animation Demos

Editor’s note: For a newer, updated version of this post, check it out here. Since the introduction of…Read more

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.

shift.css homepageshift.css homepage

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 .css and .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 .shift-element applied.

<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.

  1. data-animation: Name of the animation
  2. data-delay: Total delay(in seconds) before the animation starts
  3. 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.

I do wish this library came with more options in JavaScript because it would let developers have so much more control over the placement and features. But for a simple(and free) animation framework I can’t complain.

Shift.css is perfect for newer developers who want to create more complex animation styles without writing verbose code from scratch.

Tuesday.css is The Hottest Animation Library Right Now

.no-js #ref-block-post-29105 .ref-block__thumbnail { background-image: url(“http://media02.hongkiat.com/thumbs/250×160/tuesday-css.jpg”); }

Tuesday.css is The Hottest Animation Library Right Now

By now you should already be familiar with Animate.css as the primary animation library among web designers. But…Read more

Source: Hongkiat

(982 Posts)

Leave a Reply