3 stunning CSS animation effects that will captivate your users

Beautiful visual design isn’t enough any more, modern design needs great interaction to really stand out. Animations in your designs can provide clarity, direct attention, and create a delightful experience.

Designing interactions is exciting, but costly. Often it takes back and forth between designers and developers to get animations just right; but it doesn’t need to be this way.

CSS transitions afford the opportunity for designers with limited knowledge of code to enhance their projects with stunning motion effects that will engage users like never before.

Let’s start with something simple: moving from one screen to another…

 

Simple view-slider technique

You can build with a text editor and a browser to test, but I prefer to use a tool like jsfiddle or codepen.

Build a basic layout something like this:

<div class="screen">
    <div class="slider">
        <img alt="" src="img1.png" />
        <img alt="" src="img2.png" />
    </div>
</div>

You’ll need a ‘screen’ and then a ‘slider’ inside the screen. The slider extends beyond the edge of the screen, and holds the mockup images.

001

To achieve this, you need to ensure that you add overflow:hidden to the .screen div.

Your CSS will look something like this:

.screen {
    overflow:hidden;
    width:320px;
    height:568px;
}
.slider {
    position:relative;
    float:left;
    height:568px;
    width:700px;
    left:0;
    -webkit-transition:all 0.5s ease-in-out;
}
.slider img {
    position:relative;
    float:left;
    height:568px;
    width:320px;
}
.screen:hover .slider {
    left:-320px;
}

The final statement in the CSS is what controls the position of the slider, it moves the .slider div left by 320px revealing the second image.

002

Here’s the jsfiddle with all the code.

With a bit of creativity, you can really run with this simple technique and create some clever animations. Things really start to get interesting when you combine effects. For example: I recreated Twitter’s ‘swipe-to-reveal profile’ from their mobile app using a very similar ‘slider’ approach.

003
004

Check out the jsfiddle here.

 

 

3D transforms

Brush up on your 3d Transforms if you need to, because they provide a stunning visual effect.

Using the -webkit-transform: property, we can treat the browser as a 3D space and make some animations with depth. iOS7 in particular makes use of the ‘single space’ metaphor in its native apps. Also 3D transforms are very useful for creating ‘bouncing’ or ‘popping’ animations.

I used the same :hover tactic from our previous example and added some 3D transforms to create this effect:

005

Check out all the code here.

 

 

Using jQuery and JavaScript

So far we’ve only looked at CSS :hover effects to produce animations. With jQuery, we can use click() events to designate addClass() and removeClass() on elements. This gives us a huge amount of flexability to do whatever kind of crazy animations we want.

Below I have a function called kaskade, which applies the open class to each of 4 menu items in 0.15s intervals. The open class gives the icons opacity:1; and left:0; when before they were at opacity:0; and left:-50px. This creates a playful opening effect for the menu. Experiment for yourself inside the jsfiddle.

006

This last one is a rather extreme example, but it just goes to show what’s possible with this system of prototyping:

007

Once more, here’s the jsfiddle.

By designing your own simple animations, you’ll save yourself and your development team a lot of time and energy. With CSS you can experiment with animations and send your engineers living, breathing, moving examples. All it takes to bring your mockups to life is a little bit of code.

0 shares
  • http://maccg.com/ Jason McGovern

    Saving this in my list of resources. Quite illustrative. Thanks.

  • Samuel

    Interesting post. Simple and clean use of css transitions, like it.
    May I suggest including:
    transition: along side -webkit-transition: property to allow for cross browser functionality.

  • Ivanov Karmazov

    These are awesome! Now, If I could actually use them without getting yelled at because they don’t work on certain browsers that would be… well.. that would be a dream..

    But I digress…

  • penina

    Love these! I’m going to mull over a 3D Transforms experiment first. That one can look gimmicky fast if we’re not careful, but it’s so sci fi! :-)

  • Ramón Ramos

    Aren’t left, top, etc. transitions calculating layout every pixel moved? Isn’t that CPU expensive? Shouldn’t you put your movement into the translate train? How does this runs on a real device?

    • William Newton

      Ramon, my examples are for prototyping interactions, not writing production-ready code. I think the best way to optimize for performance with these types of animations is to activate the GPU. But that’s a topic for another post :)

    • http://tvshowskingdom.com/ Ronnie_Gardocki

      Transitions faster than defult jQuery.animate(), but if you wanna maximum speed, you need to use something like Velocity.js
      Check this http://davidwalsh.name/css-js-animation

  • Casey

    To clean up all the variables on the jquery/javascript menu wouldnt it make more sense to do:

    var kaskade = function () {
    $.each($(‘.menu’), function(index, value){
    setTimeout(function(){$(value).addClass(“open”)}, 200*index);
    });
    };

    Same for unkaskade just removeClass

  • CloudyMouse

    Thanks for the post. Have been looking for a simple slider effect like the first two shown.

  • Eva Wright

    Really cool post, thank you!!

  • voltagenewmedia

    Love the first example, so simple.

  • Ariel Ferro

    You shed some light on a widely used UI behavior these days. Thumbs up!

  • http://webplatformdaily.org Šime Vidas

    What’s the target environment for these animations?. iPhone?

  • http://wtff.com/ JustConsumer

    Browsers support ?

  • http://webplatformdaily.org Šime Vidas

    No reason to restrict just to iPhone. This is Open Web Platform technology and other mobile browsers support this too.

  • Ramón Ramos

    Have you tested in a real device?

  • cresttechnosoft

    Thanks for sharing such a nice post. I like the first part the CSS3 very simple slider. I had never seen the pure CSS3 slider before. I always jQuery for sliders and I prefer bootstrap slider for responsive websites.

  • Andrew Leith

    Your article’s examples are extremely well crafted. You should check out Greensock – you’d be able to do some crazy shit with it.