3 stunning CSS animation effects that will captivate your users

Default avatar.
April 24, 2014
3 stunning CSS animation effects that will captivate your users.

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

Will Newton

Will Newton is a co-founder of DJZ in San Francisco. He blogs at his website and tweets at @willdjthrill

Read Next

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…