Skypecon - POC

by Paulo Ávila

HTML

<i class="sc sc-doh sc-still"></i>
<i class="sc sc-doh sc-hover"></i><br>
<i class="sc sc-doh          sc-slow"></i>
<i class="sc sc-doh"></i>
<i class="sc sc-doh          sc-fast"></i><br>
<br>

<i class="sc sc-doh sc-still sc-2x"></i>
<i class="sc sc-doh sc-hover sc-2x"></i><br>
<i class="sc sc-doh          sc-2x sc-slow"></i>
<i class="sc sc-doh          sc-2x"></i>
<i class="sc sc-doh          sc-2x sc-fast"></i>

<p>Skype emoticon (doh) magic!</p>

CSS

.sc {
    display: inline-block;
    position: relative;
    text-align: center;
    background-position: top left;
    background-position: center center;
    background-repeat: no-repeat;
    
    width: 20px;
    height: 20px;

    -webkit-animation-duration: 2.3s;
}

.sc.sc-slow {
    -webkit-animation-duration: 3.5s;
}

.sc.sc-fast {
    -webkit-animation-duration: 1.5s;
}

.sc,
.sc.sc-hover:hover {
    -webkit-animation-name: frame-animation-2x;
    /*-webkit-animation-duration*/
    -webkit-animation-timing-function: steps(59);
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state: running;
}

.sc:not(.sc-2x),
.sc:not(.sc-2x).sc-hover:hover {
    -webkit-animation-name: frame-animation;  
}

.sc.sc-hover {
    -webkit-animation-name: unset;
}
.sc.sc-still {
    -webkit-animation: none;
}

@-webkit-keyframes frame-animation-2x {
    0% { background-position: 0 0; }
    100% { background-position: 0 -2360px; }
}

@-webkit-keyframes frame-animation {
    0% { background-position: 0 0; }
    100% { background-position: 0 -1180px; }
}

.sc.sc-2x {
    width: 40px;
    height: 40px;
}


.sc.sc-still.sc-doh {
    background-image:...

JavaScript

// http://codepen.io/simurai/pen/tukwj
// http://simurai.com/post/37075268994/steps-animation
// http://css-tricks.com/snippets/css/keyframe-animation-syntax/

// For some reason, in Safari (and older versions of Chrome) there is a glitch every once in a while during the animation. Seems like the step function adds an pixel or 2 every so often. Increase the duration of the animation to slow down.

// Note: 2x will double the size (40px) on non-retina screens doubling the size. Has no effect on retina screens

// Add .sc-md,.sc-markdown for text to be replaced (via JS) and include a JS function (plus jQuery plugin) to programmatically do (and undo) it

// Only play a couple of times? animation-iteration-count

/*
var img = new Image,
    img.src,
    w = img.width,
    h = img.height,
    frames = Math.floor(h / w);
    duration = frames ??
*/