Animated Icons

A sample pack (10) of animated icons from Kickdrop. Full icon set coming soon! These retina-ready icons were animated in Adobe After Effects and are exported as .png sprites-sheets. Sprite-sheets contain a collage of frame-by-frame stills that make up an animation (This technique has a long history in gaming).

We used Stitches , a .png sprite sequence generator, to create the final sheets. After generating the sprite sheets, we used pure CSS3 to animate through the sprite sheet on hover. The mixture css animations and sprite-sheets creates an interesting combination to create visually rich, game-like experiences.

We recommend using the animated versions of the icons for desktop users only. To ensure that we create production-ready assets, we’ve disabled the animations on mobile devices. An animated .gif will be included with the full set, we found that .gifs perform better on tablets and mobile. The animated icon set includes two sizes: 200px and 400px (for retina display).

Getting Started

Just insert the code below in the head tag of your page. We’ve included bootstrap for handling layouts, though it is optional of course. We’ve also included modernizr to help expand the reach of the CSS3 for the animation.

<link href=”https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css” media=”all” rel=”stylesheet”>

<link href=”css/styles.css” media=”all” rel=”stylesheet”>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js”></script>

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” name=”viewport”>

Code Structure

Featured below are all of the class names for inserting the icons in your html. Simply copy and paste the container that you want to include and the CSS handles the rest.

<div class=“container”>

<div class=“icon bullseye”></div>

<div class=“icon lightbulb”></div>

<div class=“icon cogs”></div>

<div class=“icon chat”></div>

<div class=“icon phone”></div>

<div class=“icon search”></div>

<div class=“icon trophy”></div>

<div class=“icon love”></div>

<div class=“icon map”></div>

<div class=“icon piggybank”></div>

</div>

Ahh, finally – it’s time for the CSS. In short, we are moving through our sprite-sheet withbackground-position and controlling how fast this is accomplished using animation steps. It takes a little math to get this working properly – or you will have yourself an old school film reel effect. A more detailed explanation and alternative, javascript-powered techniques, you can check out Thomas Reynold’s site

@-webkit-keyframes icon-animate 

from 

background-position: center top; 

to 

background-position: center -9400px; 

@-moz-keyframes icon-animate 

from 

background-position: center top; 

to 

background-position: center -9400px; 

@keyframes icon-animate 

from 

background-position: center top; 

to 

background-position: center -9400px; 

.icon 

width: 200px;

height: 200px;

border-radius: 50%;

display: inline-block;

background-size: 200px 9600px;

background-position: center top;

background-repeat: no-repeat;

margin: 20px;

background-color: white;

transform: translate3d(0, 0, 0);

-webkit-transform: translate3d(0, 0, 0);

cursor: pointer; 

.icon:hover 

-webkit-animation: icon-animate 1.7s steps(47) infinite;

-moz-animation: icon-animate 1.7s steps(47) infinite;

animation: icon-animate 1.7s steps(47) infinite;

Animated Icons with CSS3 for html use

Ads

Friday, 4 July 2014

Animated Icons with CSS3 for html use

Animated Icons

Getting Started

Code Structure

No comments:

Post a Comment