Shift.css | version 1.0

Make fantastic

Timed, contained, CSS


Click/tap to play

Download Shift


Shift.css provides a simple framework to build timed, contained CSS animations. Within your defined "Shift Container" you can animate a wealth of HTML elements, you can also animate nested elements and adaptive elements like the example above.



Download and extract the two files (shift.css and shift.js). Link shift.css in your document head like a typical stylesheet, then call the shift.js file just before your closing body tag. A basic example is provided below:

        <!DOCTYPE html>
                <title>Title of the document</title>
                <link href="shift.css" rel="stylesheet">
            <script src="shift.js"></script>


In summary, first you need to define a DIV that will serve as the container for the animation. All animating child elements within that DIV will be defined as Shift Elements, these elements can have animations and timings applied to them in the form of data attributes.

Let's have a look step by step. Create your Shift Container by giving it an ID of shift-container:

    <div id="shift-container">

You can add additional CSS properties to the Shift Container, you may wish to specify a width or height. In this example we will give it a width and height of 400px and a background colour of black.

        width: 400px;
        height: 400px;

Next let's add our animating elements. Let's keep things simple for this example and animate three empty DIVs which we will style as basic coloured squares. We will also parent two of the DIVs to show how child elements can inherit animations from their parent. Create three DIVs like so:

    <div id="shift-container">
        <div id="div1" class="shift-element">
            <div id="div2" class="shift-element"></div>
            <div id="div3" class="shift-element"></div>

Remember: All animating elements need to be given a class of shift-element AND a unique ID.

Now let's add some styling to our three DIV boxes.

        top: 200px;
        left: 170px;
        width: 100px;
        height: 100px;
        background-color: #F00;
        top: 20px;
        left: 20px;
        z-index: 1;
        top: 140px;
        left: 20px;

It's time to animate. There are three data attributes which we can apply to our Shift Elements to add movement and control:
data-animation The name of the animation
data-delay The delay (in seconds) before the animation will play
data-duration the length of time the animation will play for (in seconds)

Let's add some data attributes to our simple DIV shapes:

        <div id="shift-container">
            <div id="div1" class="shift-element" data-animation="shift_drop" data-delay="0" data-duration="0.6">
                <div id="div2" class="shift-element" data-animation="shift_exitFade" data-delay="1" data-duration="1"></div>
                <div id="div3" class="shift-element" data-animation="shift_exitLeft" data-delay="2" data-duration="3"></div>

Our demo is complete! Here is the live version. To play the animation simply click the black box we created.

Tip: By default, Shift animations are invoked by clicking or tapping on them. You can have the animations play automatically by adding the class shift-play to your Shift Container element.

Animations currently available

I intend to add many more animations to the Shift library, currently the below are available: