CSS3 Coin-Flip Animation

8 Responses

  1. Caleb Khazoyan Caleb Khazoyan

    Little CSS3 animation project based on Eddie Lobanovskiy's Twitter button concept. The entire animation functions via CSS3, though the rollover trigger requires jQuery for technical reasons. It does degrade very nicely when Javascript and/or CSS3 support are lacking, however.

    Go to Demo

    Comments? Critiques?

    (Note that Safari acts a bit funny at the moment, seems to be the fault of the browser in this case. FF/Chrome/IE10 are all good)

    over 1 year ago

  2. Mandy McClausky Mandy McClausky

    -webkit-transform: translate3d(0,0,0);
    on the text will keep it from bolding after the animation is done, otherwise good work!

    over 1 year ago

  3. Caleb Khazoyan Caleb Khazoyan

    @Mandy McClausky Yeah I was wondering what was causing that (only happens in webkit). Do you happen to know the particulars?

    Thanks for the fix by the way, it's all corrected now. :)

    over 1 year ago

  4. Mandy McClausky Mandy McClausky

    Certain things trigger a browser's hardware acceleration, particularly animations and opacity changes. In making that switch, it removes the subpixel-antialiasing, sometimes for the entire site.

    I wrote a little entry on Coderwall about my web typography explorations since I kept running into the same issues over and over again that might help you down the line.

    over 1 year ago

  5. Caleb Khazoyan Caleb Khazoyan

    @Mandy McClausky Yeah I did notice the lack of AA during animations on another project of mine. Didn't realize there were so many legibility options though, thanks!

    Out of curiosity, ever dealt with text glitches in Safari during CSS transforms? I just noticed that this button has trouble in Safari only (Chrome is fine) whenever a rotateX animation is applied to the text element or the coin element behind it.

    over 1 year ago

  6. Mandy McClausky Mandy McClausky

    Oh weird! I haven't done extensive enough stuff with animations yet, so this one is out of my comfort zone. Let me know when you find out, though -- (thankfully) there are a lot of StackOverflow questions about these types of behaviors.

    over 1 year ago

  7. Eddie Lobanovskiy Eddie Lobanovskiy

    Hey man, that looks pretty cool! :)

    One thing I noticed the easing is a little funky at the beginning and the end of animation. (when it bounces back into place) perhaps giving a little more time will fix the problem. But other than that it looks good man!

    over 1 year ago

  8. Caleb Khazoyan Caleb Khazoyan

    Thanks. :)

    Could you define funky for me in this case?

    over 1 year ago

keyboard shortcuts: previous shot next shot L or F like